Next.js Project Setup: A Step-by-Step Guide for 2026

You can set up a new Next.js project in under two minutes by running the npx create-next-app@latest command in your terminal. This automated tool configures the entire folder structure, installs React 19, and sets up the latest Next.js 16 framework so you can start building immediately. By following a few simple prompts, you will have a production-ready development environment running on your local machine.

What tools do you need before starting?

Before you run any commands, you must ensure your computer has the right environment. Next.js 16 requires a modern version of Node.js (a runtime environment that allows you to run JavaScript outside of a web browser).

For the best experience in late 2026, you should install Node.js 24 or 26 LTS (Long Term Support). You will also need a code editor like Visual Studio Code to write your instructions and a terminal (a text-based interface for your computer) to run commands.

If you are unsure if you have these, open your terminal and type node -v. If it returns a number lower than 24, head to the official Node.js website to download the latest stable version.

How do you start the Next.js installation?

The easiest way to begin is by using a tool called npx (a package runner that comes with Node.js). This allows you to use the latest installation script without permanently downloading it first.

Open your terminal and navigate to the folder where you want your project to live. Type the following command and press Enter:

npx create-next-app@latest my-awesome-project

This command tells your computer to create a new folder named "my-awesome-project" and fill it with everything a modern web app needs. We've found that using the @latest tag is vital to ensure you get the most recent security patches and performance features.

Which configuration options should you choose?

After you run the command, the terminal will ask you a series of questions. Don't worry if these terms seem scary; the default options are usually the best for beginners.

1. Would you like to use TypeScript? Select Yes. TypeScript is a version of JavaScript that helps catch errors by checking your data types (like ensuring a number isn't treated as a piece of text).

2. Would you like to use ESLint? Select Yes. ESLint is a tool that scans your code for common mistakes and helps you keep your files clean and organized.

3. Would you like to use Tailwind CSS? Select Yes. Tailwind is a styling framework that lets you design your website directly in your HTML, making it much faster to build beautiful layouts.

4. Would you like to use the src/ directory? Select Yes. This keeps your actual application code separated from configuration files, which makes your project easier to navigate as it grows.

5. Would you like to use App Router? Select Yes. This is the modern standard for Next.js 16, offering better performance and simpler ways to handle different pages on your site.

6. Would you like to customize the default import alias? Select No. Using the default @/* alias allows you to reference your files easily without typing long, confusing file paths.

How do you open and explore the project files?

Once the installation finishes, you need to enter your new project folder. Type cd my-awesome-project into your terminal to move inside the directory.

Now, open this folder in your code editor to see what the installation tool created for you. You will see a folder named src/app, which is where the heart of your website lives.

The file named page.tsx represents your homepage. Next.js uses a file-based routing system (a way to turn folders and files into web addresses), so whatever you put in this file shows up when someone visits your site.

How do you start the development server?

To see your website in action, you need to start the development server (a local version of a web server that updates as you change your code). Type the following command in your terminal:

npm run dev

The terminal will tell you that the server is "ready" and provide a link, usually http://localhost:3000. Open your web browser and paste that link into the address bar.

You should now see the default Next.js starter page. This means your environment is perfectly configured and ready for you to start building your own features.

How do you make your first change?

Making changes in Next.js 16 is instant thanks to a feature called Fast Refresh (a tool that updates the browser the moment you save a file). Let's try changing the text on your homepage.

Open src/app/page.tsx in your editor and look for the text that says "Get started by editing". Change that sentence to "Hello, this is my first Next.js app!" and save the file.

// src/app/page.tsx
export default function Home() {
  return (
    <main>
      {/* This heading will appear on your screen */}
      <h1>Hello, this is my first Next.js app!</h1>
    </main>
  );
}

Go back to your browser, and you will see the change reflected immediately without you having to refresh the page. This quick feedback loop is why many developers prefer Next.js for building modern products.

What are common mistakes to avoid?

It is normal to run into a few bumps when you are just starting out. One common issue is trying to run the npm run dev command while you are in the wrong folder.

If you see an error saying "missing script: dev," make sure you have used the cd command to enter your project folder. Another common mistake is having another program already using "Port 3000," which will prevent your site from loading.

If this happens, Next.js will usually automatically try Port 3001 instead. Always check the terminal output to see exactly which address your site is using.

Next steps

Now that your project is running, you can experiment with adding new pages by creating new folders inside the app directory. You might also want to explore how to use Claude Opus 4.5 or GPT-5 to help you write specific components (reusable pieces of UI like buttons or navigation bars).

Learning how to fetch data from an API (a way for programs to talk to each other) is a great next goal. You have successfully crossed the biggest hurdle: getting started.

For more information, visit the official Next.js documentation.