How to Create a Next.js App: Your First Project, Step by Step

Originally published on CodingCush.

To create a Next.js app, install Node.js, run one command, npx create-next-app@latest, answer a few simple setup questions, then run npm run dev and open localhost:3000 in your browser. That is the whole process. In the next ten minutes you will have a real project running on your own computer, ready to edit.

What You Need Before You Start

You do not need much, and you do not need to be an expert. You need three things: Node.js, a code editor, and some basic React knowledge.

First, install Node.js LTS, the stable long term support version, from the official Node.js website. Next.js needs a recent version, so update old installs now. Then check it in your terminal:

node -v
npm -v

If both print a version number, you are ready. If you see command not found, reopen the terminal or reinstall Node.

Second, install a code editor. Visual Studio Code is free and works well, but any editor is fine.

Third, you need basic React: components, JSX, and props at a simple level. If that feels new, work through this beginner React roadmap for learning React step by step first. An hour there makes this guide much easier.

The One Command That Creates Everything

Open your terminal, move to the folder where you keep your projects, and run this command:

npx create-next-app@latest my-first-app

In short: npx runs a tool without installing it permanently, create-next-app is the official starter, latest means use the newest version, and my-first-app is your folder name. Use lowercase letters and hyphens, not spaces.

The tool downloads what it needs, then asks a short list of questions. When it finishes, you will see a success message.

The full official instructions live in the Next.js installation guide on nextjs.org, which is worth bookmarking because it is updated whenever the setup process changes.

What Each Setup Question Really Means

Beginners often just press Enter repeatedly. The defaults are sensible, but it is better to know what you are agreeing to.

Setup question	What it means	Recommended for beginners
Would you like to use TypeScript?	TypeScript adds type checks to JavaScript and helps catch mistakes early.	Yes, if you know a little TypeScript. No is also fine while learning.
Which linter would you like to use?	A linter checks your code style and spots common errors as you type.	Choose the default option.
Would you like to use Tailwind CSS?	Tailwind lets you style pages with small utility classes inside your markup.	Yes. It pairs very well with Next.js and is easy to learn gradually.
Would you like your code inside a src/ directory?	This puts your app code in a src folder to keep the project tidy.	Either works. No keeps the structure simpler for a first project.
Would you like to use App Router?	The App Router is the modern way to build Next.js apps, using the app folder.	Yes. Always choose this for new projects.
Would you like to customise the import alias?	An alias like @/ lets you write short import paths instead of long relative ones.	Keep the default.

My advice: choose TypeScript only if you are comfortable with it, say yes to Tailwind and the App Router, and keep the defaults elsewhere. Every option can be added later.

The official Next.js documentation introduction (nextjs.org) — what Next.js is and how the docs are organised.

Run Your App and See It Live

Now move into your new folder and start the development server:

cd my-first-app
npm run dev

The terminal will print a local address, usually http://localhost:3000. Open that address in your browser. You should see the default Next.js starter page. Congratulations, your app is running.

While the dev server runs, every save updates the browser almost instantly. Leave the terminal open while you work, and press Control plus C to stop it. If port 3000 is busy, Next.js will use 3001 instead.

A Quick Tour of Your Project Folders

Open the project in your editor. You only need a few files on day one.

The app folder is where your pages live. This is where you will spend most of your time. Inside it, page.tsx is your home page, layout.tsx wraps every page with shared parts like a header, and globals.css holds your global styles.

The public folder holds static files like images. For example, public/logo.png appears at localhost:3000/logo.png.

The file package.json lists your dependencies and scripts, such as dev, build, and start. You will rarely edit it by hand at first.

Ignore the rest for now; files like next.config are already configured. If you are unsure what Next.js adds on top of React, this explanation of what React is and why it is used for building interfaces will fill in the background nicely.

Edit Your Home Page

Let us make the starter page yours. Open app/page.tsx, or app/page.js if you chose JavaScript, delete the starter content, and try something small like this:

export default function Home() {
  return (
    <main>
      <h1>Hello, this is my first Next.js app</h1>
      <p>I built this in about ten minutes.</p>
    </main>
  );
}

Save the file and check your browser. The page has already changed. A page is just a React component that returns markup, exported as the default export.

Try small changes next: another paragraph, a new heading, a list. Breaking things now is fine, it is how you learn.

Add a Second Page

A real website needs more than one page, and in Next.js adding a page is simply adding a folder. Inside the app folder, create a new folder called about, and inside it create a file called page.tsx:

export default function AboutPage() {
  return (
    <main>
      <h1>About me</h1>
      <p>This is my second page. No router setup needed.</p>
    </main>
  );
}

Now visit localhost:3000/about. Your new page is live, with no configuration. The folder name becomes the URL. To understand this system properly, read how routing works in Next.js with folders and files when you are ready for links, layouts, and dynamic pages.

To link between pages, use the Link component from next/link. It preloads linked pages, so changes feel instant.

Your Next Steps After Day One

Keep your next steps small. Add a contact page and a projects page, build a shared header in your layout file, and add images from public with a little Tailwind styling.

When you feel comfortable, explore the official Next.js documentation a section at a time. Do not try to learn everything in one weekend. Build one tiny thing, finish it, then build the next.

One last tip: commit to Git early, even if it is messy. It gives you a safety net to return to a version that worked.

Frequently Asked Questions

Is Next.js free to use?

Yes. Next.js is free and open source. Creating and running an app on your own computer costs nothing. You only pay if you later choose paid hosting or paid services.

Do I need to know React before Next.js?

You need the basics: components, JSX, and props. You do not need to be advanced. If you can build a small React page, you can start Next.js and learn the rest as you go.

Should I choose TypeScript or JavaScript?

Either is fine for a first project. JavaScript feels simpler at the start. TypeScript helps catch errors as projects grow, and most professional teams use it, so it is worth learning later.

What is the difference between npm run dev and npm run build?

The dev command runs your app for development, with instant updates when you save. The build command creates an optimised production version, ready to put online for real visitors.

Conclusion

Creating a Next.js app is really just three moves: install Node.js, run create-next-app, and start the dev server. Everything else, the folders, the pages, the styling, you can learn piece by piece inside a project that already works. Start today, keep the project small, and change one thing at a time. Your first app does not need to impress anyone. It just needs to exist.