Let's talk
nilstruo

Blog

Next.js - Learning by doing - Part 3

Next.js - Learning by doing - Part 3

Insights

Shreyansh Mehta

29 Mar, 2021

Technology

I have started a new series on learning Next.js by building a full fledge professional portfolio website.

YouTube Video is as below:

In this video, we will be going through the static rendering concepts of next.js. We will do hands-on training - in which we will implement a product list, generate product detail routes dynamically, have a fallback in place and show product details.

Table of content

  1. Set agenda
  2. Link component by next.js

The Link component is used to do the navigation in next.js. If we use the normal HTML anchor tag that will also work but it will refresh the page every time we navigate with the Link component we can perform complex navigation without troubling the refresh/reload. 3. Nested routing or multi-layer page navigation 4. Dynamically generating routes and props 5. exporting getStaticProps method for next.js 6. exporting getStaticPaths method for next.js to generate dynamic paths/pages

  1. Nested routing or multi-layer page navigation
  2. Dynamically generating routes and props
  3. exporting getStaticProps method for next.js
  4. exporting getStaticPaths method for next.js to generate dynamic paths/pages

Related link: