Next.js for Beginners: Your First Project Without the Confusion

Why Next.js?

If you already know a little React, you’ve probably felt the pain of setting up a project from scratch. There’s Webpack, Babel, routing, image optimization, and a dozen other decisions to make. Next.js removes that friction by giving you a complete framework with sensible defaults.

Next.js is built on top of React. It gives you file-based routing, automatic code splitting, and a few rendering options like server-side rendering and static generation. For beginners, the best part is that you don’t need to configure anything. You can start with an empty project and add features as you learn.

What You Need to Start

All you need is Node.js installed on your machine. To check, open your terminal and run:

node -v

If you see a version number, you’re ready. If not, download the LTS version from the official Node.js website.

Now create your first project. Run this command in your terminal:

npx create-next-app@latest first-app

The command will ask a few questions. If you’re not sure what to choose, just accept the defaults. For this tutorial, choose TypeScript if you’re comfortable with it, but JavaScript works fine too.

Once the install finishes, move into the project folder and start the development server:

cd first-app
npm run dev

Open your browser and go to http://localhost:3000. You should see the default Next.js welcome page. That means everything is working.

Understanding the Project Structure

Inside your project, the app folder is the heart of the application. This is where your routes live. You’ll see a file called page.tsx (or page.js if you chose JavaScript). That file is the homepage.

There is also a layout.tsx file. It wraps every page in your app and is a good place to put shared navigation, footers, or global metadata. The public folder holds static assets like images and PDFs. The globals.css file contains global styles.

You don’t need to understand every file right away. Just know that the app folder is where you’ll spend most of your time.

Build Your First Page

Let’s replace the default content with something simple. Open app/page.tsx and replace everything with this:

export default function Home() {
  return (
    <main>
      <h1>Hello, Next.js</h1>
      <p>This is my first page.</p>
    </main>
  );
}

Save the file, and the browser will update instantly. That’s hot reloading in action. No manual refresh required.

If you used JavaScript instead of TypeScript, just edit app/page.js with the same component code but without the type annotation.

Add Another Page

One of the best things about Next.js is that routing is file-based. To create a new page, all you have to do is create a new folder inside app and add a page file.

For example, create a folder called about inside app. Then create a file called page.tsx inside it. Add a simple component:

export default function About() {
  return (
    <main>
      <h1>About Me</h1>
      <p>I am learning Next.js.</p>
    </main>
  );
}

Now visit http://localhost:3000/about. You have a new page without touching a router configuration file.

To link between pages, use the Link component from next/link instead of a regular <a> tag. It gives you client-side navigation, which makes page transitions faster.

Styling in Next.js

You have several styling options. The easiest way is to use global CSS, but as your project grows, you’ll want to keep styles scoped to specific components.

Next.js supports CSS Modules out of the box. Just create a file like page.module.css, import it in your component, and use the generated class names. You can also use Tailwind CSS if you prefer utility classes. The default starter project already includes Tailwind for the welcome page, so you can experiment with it right away.

What’s Next?

You don’t need to master every feature on day one. Start by building small pages and linking them together. Then explore dynamic routes, data fetching, and API routes when you feel ready.

Next.js is a big framework, but it’s also one of the friendliest for beginners because it doesn’t force you to make hard choices upfront. Create a few pages, break things, fix them, and enjoy the process. That’s how real learning happens.