9
Chapter 9
Installing Next.js
When you use Next.js in your project, you do not need to load the react
and react-dom
scripts from unpkg.com anymore. Instead, you can install these packages locally using npm
or your preferred package manager.
Note: To use Next.js, you will need to have Node.js version 18.17.0 or above installed on your machine (see minimum version requirement), you can download it here.
To do so, create a new file in the same directory as your index.html
file, called package.json
with an empty object {}
.
{}
In your terminal, run the following command in the root of your project:
npm install react@latest react-dom@latest next@latest
Once the installation is complete, you should be able to see your project dependencies listed inside your package.json
file:
{
"dependencies": {
"next": "^14.0.3",
"react": "^18.3.1",
"react-dom": "^18.3.1"
}
}
Don't worry if you're on later versions than the ones shown above, as long as you have the next
, react
, and react-dom
packages installed, you're good to go.
You will also notice a new file called package-lock.json
file that contains detailed information about the exact versions of each package.
Jumping back to the index.html
file, you can delete the following code:
- The
<html>
and<body>
tags. - The
<div>
element with theid
ofapp
. - The
react
andreact-dom
scripts since you've installed them with NPM. - The
Babel
script because Next.js has a compiler that transforms JSX into valid JavaScript browsers can understand. - The
<script type="text/jsx">
tag. - The
document.getElementById()
andReactDom.createRoot()
methods. - The
React.
part of theReact.useState(0)
function
After deleting the lines above, add the following import to the top of your file:
import { useState } from 'react';
Your code should look like this:
import { useState } from 'react';
function Header({ title }) {
return <h1>{title ? title : 'Default title'}</h1>;
}
function HomePage() {
const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
const [likes, setLikes] = useState(0);
function handleClick() {
setLikes(likes + 1);
}
return (
<div>
<Header title="Develop. Preview. Ship." />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
<button onClick={handleClick}>Like ({likes})</button>
</div>
);
}
The only code left in the HTML file is JSX, so you can change the file type from .html
to .js
or .jsx
.
Creating your first page
Next.js uses file-system routing. This means that instead of using code to define the routes of your application, you can use folders and files.
Here's how you can create your first page in Next.js:
- Create a new folder called app and move the
index.js
file inside it. - Rename your
index.js
file topage.js
. This will be the main page of your application. - Add
export default
to your<HomePage>
component to help Next.js distinguish which component to render as the main component of the page.
import { useState } from 'react';
function Header({ title }) {
return <h1>{title ? title : 'Default title'}</h1>;
}
export default function HomePage() {
// ...
}
Running the development server
Next, let's run your development server so you can see the changes in your new page while developing. Add a "next dev"
script to your package.json
file:
{
"scripts": {
"dev": "next dev"
},
"dependencies": {
"next": "^14.0.3",
"react": "^18.3.1",
"react-dom": "^18.3.1"
}
}
Check what happens by running npm run dev
in your terminal. You'll notice two things:
- When you navigate to localhost:3000, you should see the following error:
This is because Next.js uses React Server Components, a new feature that allows React to render on the server. Server Components don't support useState
, so you'll need to use a Client Component instead.
In the next chapter, we'll discuss the main differences between Server and Client Components and fix this error.
- A new file called
layout.js
was automatically created inside theapp
folder. This is the main layout of your application. You can use it to add UI elements that are shared across all pages (e.g. navigation, footer, etc).
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
Summary
Looking at the migration so far, you may already be getting a sense of the benefits of using Next.js:
- You removed the React and Babel scripts; a taste of the complex tooling and configuration you no longer have to think about.
- You created your first page.
Additional Reading:
You've Completed Chapter 9
You've installed Next.js and are ready to start building your first app.
Was this helpful?