Next.js Getting Started

Installation

Create a new Next.js project.

npx create-next-app@latest my-app
cd my-app
npm run dev

Answer prompts to configure TypeScript, ESLint, etc.
Dev server runs at http://localhost:3000.
Use --ts flag to skip prompts and create a TypeScript project.
```
npx create-next-app@latest my-app --ts --app --tailwind
```
Install dependencies and start the dev server in one step.
```
npm install && npm run dev
```

Project Structure

Pages in app folder become routes automatically.

my-app/
  app/
    page.tsx        # / route
    about/
      page.tsx      # /about route
    blog/
      [slug]/
        page.tsx    # /blog/:slug route
  public/           # Static files
  package.json

Each page.tsx file is a route.

Place static assets like images in the public folder.

public/
  logo.png          # /logo.png
  favicon.ico       # /favicon.ico

The layout.tsx at the root wraps every page in the app.

// app/layout.tsx
export default function RootLayout({ children }) {
  return <html lang="en"><body>{children}</body></html>;
}

Use the app/api folder to create API route handlers.

// app/api/health/route.ts
export async function GET() {
  return Response.json({ status: "ok" });
}

Creating a Page

Create a simple page component.

// app/page.tsx
export default function Home() {
  return (
    <main>
      <h1>Welcome to Next.js</h1>
      <p>Get started by editing this page</p>
    </main>
  );
}

Pages are server components by default.

// app/about/page.tsx
export default function About() {
  return <h1>About Us</h1>;
}

Fetch data inside a server page using async/await.

export default async function Blog() {
  const posts = await getPosts();
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

Add metadata to set the page title and description.

export const metadata = {
  title: "Home",
  description: "Welcome to my Next.js site"
};

Create a client component for interactive pages.

"use client";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

Building and Deployment

Build for production.
```
npm run build
npm start
```
Test production build locally.
Deploy to Vercel with one command.
```
vercel deploy
```
Connect a Git repository to Vercel for automatic deployments on push.

Use environment variables in your deployment platform dashboard.

# Vercel > Settings > Environment Variables
DATABASE_URL=postgresql://prod-db
NEXT_PUBLIC_API_URL=https://api.example.com

Common Next Steps

Add styling with CSS modules or Tailwind.

import styles from './page.module.css';

export default function Home() {
  return <main className={styles.container}>Content</main>;
}

Use API routes for backend logic.

// app/api/hello/route.ts
export async function GET() {
  return Response.json({ hello: 'world' });
}

Add a database with Prisma or another ORM.
Install and configure Prisma as your database ORM.
```
npm install prisma @prisma/client
npx prisma init
```

Use Link for client-side navigation between pages.

import Link from "next/link";

export default function Nav() {
  return <nav><Link href="/about">About</Link></nav>;
}

Tip: Start with create-next-app for fastest setup — it includes all necessary configurations and best practices.

Warning: Remember that files in the app folder automatically become routes — organize carefully to avoid unexpected routes.