Next.js is a popular React framework for building server-side rendered applications. It simplifies React development with features like routing and API integration.

This guide will walk you through installing Next.js in Node.js. You'll learn the steps to set it up quickly.

Prerequisites

Before installing Next.js, ensure you have Node.js installed. You can check by running node -v in your terminal.

 
node -v

v18.12.1

If Node.js isn't installed, download it from the official website. You'll also need npm or yarn for package management.

Create a New Node.js Project

First, create a new directory for your project. Navigate to it in your terminal.

 
mkdir nextjs-project
cd nextjs-project

Initialize a new Node.js project by running npm init -y. This creates a package.json file.

Install Next.js

Install Next.js using npm or yarn. Run one of these commands in your project directory.

 
npm install next react react-dom

This installs Next.js along with React and React-DOM. For more on React-DOM, see our React-DOM installation guide.

Set Up Scripts

Add these scripts to your package.json file. They help you run and build your Next.js app.

 
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

Create Your First Page

Next.js uses a pages directory for routing. Create a pages folder and add an index.js file.

 
// pages/index.js
function Home() {
  return 
Welcome to Next.js!
;
}

export default Home;

Run the Development Server

Start your Next.js app by running npm run dev. This launches the development server.

 
npm run dev

ready - started server on http://localhost:3000

Open your browser to http://localhost:3000. You should see your Next.js app running.

Additional Configuration

Next.js supports custom configurations. Create a next.config.js file in your project root.

For more advanced setups, consider tools like Prettier or ESLint to maintain code quality.

Conclusion

Installing Next.js in Node.js is straightforward. Follow these steps to set up a new project quickly.

Next.js offers powerful features for React development. It's perfect for building modern web applications.

For more Node.js guides, check our other tutorials on module installations.