In Next.js, a page is a React component that represents a specific route in the application. We can create a page by creating a JavaScript or TypeScript file inside the pages directory. Each file becomes a unique route in the application.
Next.js uses a file system-based router, where the structure and filenames of the files inside the pages directory determine the routes. For example, a file named index.js inside the pages directory corresponds to the root route (/), while a file named about.js corresponds to the /about route.
The default homepage of your app is index.js. We can open the index.js file in a code editor and add content to the homepage:
We can also create a static page by creating a new javascript file in the pages directory. For example, lets create an About page:
We can access static pages by typing http://localhost:3000/page_name **in the browser.
To create a dynamic page, We'll need to create a new file in the pages directory using square brackets around the filename to indicate the dynamic parameter.
For example, a file named [id].js represents a page with the 'id' parameter. We can open the [id].js file and create a functional component to represent the page:
Next.js automatically handles the dynamic routing. We can import the useRouter hook from the 'next/router' module to read the value of this route, known as the dynamic parameter:
import { useRouter } from 'next/router';
We use the 'useRouter' hook in the IdPage component to access this value. We retrieve the value using 'router.query.id'.
Once we save the file, we can restart the next.js development server by running 'npm run dev' or 'yarn dev' and enter the URL ‘http://localhost:3000/dynamicparameter’ to render the page.
Now that we have multiple pages, we can navigate between them using the built-in ‘link’ component.
To use ‘link’, we must first import it into both pages we are linking: