Next.js Pages

What are Next.js Pages?

When you use Next.js, a page is a React Component. This component is exported from a file that has a place in the pages directory. To make routing easier, every page is associated with a route that is based on its file name.

Pages and dynamic routes

Next.js supports pages with dynamic routes. These are routes that are not just for one specific route, but can be whatever. This would mean you can create a file called pages/posts/[id].js and then access this page with routes like posts/1 and posts/2.

More about dynamic routes can be read here.

Pre-rendering and pages

Next.js pre-renders every page by default. This means that Next.js generates the HTML for each page in advance. This happens instead of doing it on the client-side JavaScript. This can improve performance and SEO.

There are two forms of pre-rendering:

  1. Static Generation

  2. Server-side Rendering

More about pre-rendering can be read here.