The use of getStaticPaths() and getStaticProps(.) allowed the Static Site Generation of these Next.js pages. The dynamic route is able to pre-fetch the details for all adventures by using Next.js’s getStaticPaths() and populating all possible route permutations based on the full list of adventures returned by the GraphQL query getAdventurePaths() This dynamic route prefetches each adventure’s data using Next.js’s getStaticProps() via a call to getAdventureBySlug(slug, queryVariables) using the slug param passed in via the adventure selection on the adventures/index.js page, and queryVariables to control the image format, width, and quality. The use of getServerSiteProps() allows for Server-Side Rendering of this Next.js page.Ī Next.js Dynamic Route that displays a single adventure’s details. Uses Next.js’s getServerSideProps() to call getAllAdventures() and displays each adventure as a card. The Next.js app uses two pages to present the adventure data. Query ($offset: Int, $limit: Int, $sort: String, $imageFormat: AssetTransformFormat=JPG, $imageWidth: Int=1200, $imageQuality: Int=80) This persisted query drives the initial view’s adventure list.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |