What is Next.js?

Next.js is a framework used to develop production ready React applications. Next.js provides many useful features e.g. pre-rendering, smart bundling, dynamic file-based routing, route pre-fetching and many more. In this blog post, we have discussed the prerequisites, how to create next.js application, next.js pages, and pre-rendering techniques.

Prerequisites:

• NodeJS 10.13 or later

Create New Application:

• Open Command Prompt, CD into the folder where you want to create the application
• Run the command:

npx create-next-app

• CD into the app folder
• Run the command npm run dev to start the app in development mode
• Run the command npm run build to generate the optimized build which can be used for production purposes
• Run the command npm run start to start the production server

Pages in Next.js:

• In next.js, pages are React components and are available inside the pages folder
• The names of the component files become the URL of the page
• For example /pages/about.js component is accessible via /about URL
• Dynamic routes can be implemented by creating dynamic files e.g. /pages/posts/[id].js which expose the URL like /posts/1, /posts/2 etc.

Pre-rendering:

In next.js, pages are pre-rendered before they are displayed in the browser which improves the performance and SEO of the web pages. Next.js let you choose the pre-rendering technique for each page. Next.js support two type of pre-rendering:

• Static Generation
  • Recommended by Next.js
  • HTML of the page is generated once at build time and is reused on each request
  • Improved performance due to the CDN caching with no extra configuration
  • A page can be generated statically with or without data
  • Static Generation without Data
    • This is the default pre-rendering technique
    • These pages do not require to fetch any data from external sources
    • HTML page is generated at build time when we run npm run build
  • Static Generation with Data
    • These pages require to fetch data from external sources e.g. an API
    • If page contents are fetched from external source, then use getStaticProps() function
    • If page paths are fetched from external source, e.g. in case of dynamic routing, then use getStaticPaths() function
    • Some pages may require both features so both functions can also be used on that page
    • These functions gets called at build time and populate the dynamic content from external sources
  • Static generation is always recommended in the cases when the page can be pre-rendered ahead of a user’s request
  • Static generation is not recommended in the cases when the page data is frequently updated or if page content is updated on every request
    • In that case either use static generation with client-side rendering where some parts can be pre-rendered and the others on client-side
    • OR use server side rendering where all content of the page is populated on each request

• Server side Rendering
  • The HTML of the page is generated on each request
  • To use server side rendering export async function getServerSideProps() from the bottom of the page
  • This function is called by the server on each request

Client-side rendering is also supported in next.js where some parts of the pages can be rendered by the client side JavaScript.

References:

https://nextjs.org/docs/