#01 Introduction – Learn Next.js

access_timepersonjunaidte14folderTech, Web Programming

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:

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/

Leave a Comment