Static Pages
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.
Dynamic Pages
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.
Navigating between pages
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:
import Link from 'next/link';We can use the ‘link’ component in our code to create a link to another page. For example, the following code creates a link to the about page:
The ‘href’ attribute in the Link component specifies the destination page's URL, while the ‘a’ tag represents the clickable link.
In versions of Next.js 12.2 and above, the link component can directly replace the a tag instead of wrapping around it:
The Link component in Next.js enables client-side navigation between two pages within the same Next.js app. This refers to the page transition using javascript to avoid the need to reload the entire page like default browser navigation would. Each page only loads what is necessary for the page. For example if we rendered only the homepage, the remaining pages would not be loaded as well. This also allows for the containment of errors; if one page fails, the remainder of the app continues to work.
In addition to our own code, we can import third-party javascript in the following method:
- Install the third-party JavaScript library with ‘
npm install example-library’
- Open the Next.js page file where we’ll be using the third-party JavaScript, for example pages/about.js
We can now use functions, objects, and modules from the third-party library.
Copyright © 2021 Code 4 Tomorrow. All rights reserved.
The code in this course is licensed under the MIT License.
If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.