Back to home

Getting Started with Next.js

Next.js has become one of the most popular frameworks for building React applications. In this post, I'll walk you through the basics of getting started.

Prerequisites

Before you begin, make sure you have the following installed:

  • Node.js 18.17 or later
  • A code editor (VS Code recommended)
  • Basic knowledge of React

Creating Your First Project

To create a new Next.js project, run the following command:

npx create-next-app@latest my-app

You'll be prompted with a few questions. Here are the recommended options:

  1. TypeScript: Yes
  2. ESLint: Yes
  3. Tailwind CSS: Yes
  4. App Router: Yes

Project Structure

After creating your project, you'll see a structure like this:

my-app/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── public/
├── package.json
└── next.config.js

The app directory is where your routes and pages live. Each folder represents a route segment.

Creating Your First Page

Pages in Next.js are React components exported from files in the app directory. Here's a simple example:

export default function HomePage() {
  return (
    <main>
      <h1>Welcome to my site!</h1>
      <p>This is my first Next.js page.</p>
    </main>
  );
}

Adding Styling

With Tailwind CSS, you can add styles directly to your components:

export default function HomePage() {
  return (
    <main className="max-w-4xl mx-auto px-4 py-8">
      <h1 className="text-4xl font-bold mb-4">
        Welcome to my site!
      </h1>
      <p className="text-gray-600">
        This is my first Next.js page.
      </p>
    </main>
  );
}

Running Your App

Start the development server with:

npm run dev

Then open http://localhost:3000 in your browser.

Next Steps

Now that you have your first Next.js app running, here are some things to explore:

  • Dynamic Routes: Learn how to create pages with dynamic parameters
  • API Routes: Build backend endpoints in your Next.js app
  • Data Fetching: Fetch data on the server with React Server Components
  • Deployment: Deploy your app to Vercel or other platforms

Happy coding!