Certifications
Foundations
3. NextJS Pages

Song Turbo Developer Certification - Foundations

Part 3: NextJS pages

This part deals specifically with creating couple of pages in NextJS which is rendered at build time (Static site generation).

Song Turbo uses React meta-framework "Next.js" for its web-application. Next is capable of creating normal and dynamic pages. They can be rendered at build time (SSG) or at runtime (SSR / Client).

Concepts to be grasped

  • NextJS Pages
  • Difference between SSG, SSR, CSR, and ISR and how NextJs supports it

Reading material

Tasks

1. Create a new turbo-posts page/route

  • The turbo-posts route should be accessible at http://localhost:3000/turbo-posts when the app in running in development mode.
  • The route should be rendered on build-time (SSG).
  • The page should receive a list of posts as props (ITurboPost[], required, refer references).
  • The page should contain a Next Head component setting page title to "Turbo Posts".
  • The page should render a Heading (h1) - "Turbo Posts".
  • The page should render the posts using the TurboPostsList component (created in previous task). Each list item should be a link to the /turbo-posts/[id] route (created in next step). Use a sensible empty-message.
  • The list of posts will be later fetched from an API but for now, we'll use a dummy list of posts, refer references.
❓

Explain the different modes of building in NextJs, SSR, SSG, ISR etc
Explain the getStaticProps, getStaticPaths and getServerSideProps functions.
Using a getServerSideProps function put specific requirements on the server that hosts the web app. Why?

2. Create a new turbo-posts/[id] page/route

  • The turbo-posts/[id] route should be accessible at http://localhost:3000/turbo-posts/[id] when the app in running in development mode.
  • The page should be rendered on build-time (SSG).
  • The static paths should be created using dummy-post list.
  • The page should receive following as props:
    • post: Post data (ITurboPost, required, refer references)
  • The page should contain a Next Head component setting page title to [Post title].
  • The page should render a link to /turbo-posts route (eg. a back-button)
  • The page should render the Post using the TurboPost component (created in previous tasks).
❓

In this task we solve this by creating a file called [id].tsx. What is an alternative way and when would you use that?

3. Link to it from the start page

  • Create a button or a link so you can navigate from the start page of the app to the list of blog posts
❓

There are two ways (at least) to do this. Either using the <Link> component or programmatically using the router. What are pros and cons of either?
Bonus: What do you get automatically when using Link that you have to do manually using the router. (hint: it increases perceived performance)

4. Commit your changes

Evaluation

To verify the page, in the terminal, run the following command:

yarn dev:web
Test of CompletionTasks