9
Chapter 9
Installing Next.js
To add Next.js to your project, you will 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 called package.json
with an empty object {}
.
{}
In your terminal, run 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.2.0",
"react-dom": "^18.2.0"
}
}
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.render()
methods. - The
React.
part of theReact.useState(0)
function
After deleting the lines above, add import { useState } from "react"
to the top of your file. 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.2.0",
"react-dom": "^18.2.0"
}
}
Check what happens by running npm run dev
in your terminal. You'll notice two things:
- 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>
);
}
- When navigating 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.
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?