Getting Started with Next.js

Getting Started with Next.js

Creating your first Next.js application is surprisingly simple. Vercel has provided excellent tooling that makes setup a breeze. Let's walk through the process step by step.

First, make sure you have Node.js installed on your computer. You can check by opening your terminal and typing node --version. If you see a version number, you're good to go.

Creating a New Project

The quickest way to start a new Next.js project is using create-next-app. This command-line tool sets up everything you need automatically.

Open your terminal and run:

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

This command creates a new directory called my-next-app with a complete Next.js setup. The @latest ensures you get the most recent version.

You'll be asked a few questions about your project preferences. For now, you can accept the defaults - they're perfect for getting started.

Project Structure

Once the setup completes, let's look at what was created. The project structure is clean and organized:

my-next-app/
├── app/           # Your application pages
├── public/        # Static files like images
├── styles/        # CSS and styling
├── package.json   # Dependencies and scripts
└── next.config.js # Next.js configuration

The app directory is where the magic happens. This is where you'll create your pages and components. Next.js uses this directory for its file-based routing system.

Running Your Application

Let's start the development server and see your new Next.js app in action. Navigate to your project directory and run:

cd my-next-app
npm run dev

This starts a development server on http://localhost:3000. Open your browser and navigate to that address. You should see the default Next.js welcome page!

The development server includes hot reloading, which means any changes you make to your code will instantly appear in the browser. Try editing the app/page.js file and watch the changes appear.

Your First Page

Let's modify the default page to create something more interesting. Open app/page.js and replace its contents with:

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

Save the file and refresh your browser. You should see your custom message. Congratulations - you've just created your first Next.js page!

Notice how simple this component is. There's no need to import React or use class components. Next.js uses modern React features like function components and JSX.