Getting Started with Next.js

Over 17,900 companies run Next.js in production, from Amazon and Walmart to early-stage startups.¹ Most engineering teams get their first project running in under an hour.

This guide walks you through setting up a Next.js project from scratch. By the end, you will have a working application deployed to a live URL. No prior Next.js experience required. React fundamentals are enough.

Why Next.js for Engineering Teams

Next.js is a React framework built by Vercel. It handles routing, rendering, data fetching, and deployment in a single package.² That matters because it eliminates the toolchain assembly problem.

Without a meta-framework, teams stitch together a router, bundler, state manager, API layer, and deployment pipeline. Each choice carries risk. Each integration burns hours. Next.js replaces that entire stack with one framework and one deploy target.

The adoption numbers reflect this. Professional developers use React at 41.6% adoption, making it the most popular frontend framework.³ Next.js sits at 18.6%, the dominant React meta-framework.³ Stack Overflow's 2024 survey confirms it as the production standard for React teams.

Three capabilities drive adoption for engineering teams:

1. Server Components by default. Components render on the server. The browser receives HTML, not a JavaScript bundle that must execute before anything appears.²
2. File-system routing. Create a file at app/about/page.tsx and it maps to /about. No router configuration. No route registration.²
3. Zero-config deployment. Push to Git. Vercel builds and deploys automatically. Preview URLs generate for every pull request.²

For teams evaluating frameworks, this combination reduces onboarding time, eliminates configuration debates, and gives every developer a consistent mental model.

Prerequisites

Before starting, confirm you have:

• Node.js 20.9 or later. Check with node -v in your terminal. If you need to install or update, use nvm for version management.
• A code editor. VS Code or Cursor with the TypeScript extension works well.
• React fundamentals. You should be comfortable with components, props, and hooks. Next.js builds on React, so these concepts transfer directly.
• A terminal. All commands in this guide use the command line.

No Vercel account is required to develop locally. You will only need one for deployment in the final step.

Step 1: Create Your Project

Open your terminal and run:

npx create-next-app@latest my-app

The CLI prompts you to choose settings. The recommended defaults include TypeScript, ESLint, Tailwind CSS, App Router, and Turbopack.⁴ Accept them.

cd my-app
npm run dev

Open http://localhost:3000 in your browser. You should see the Next.js welcome page. Hot reload is active. Every file change reflects instantly.

What just happened: create-next-app scaffolded a complete project with TypeScript configuration, a CSS framework, linting, and a development server with fast refresh. Four commands to a running application.

Step 2: Understand the Project Structure

Next.js uses the App Router, which maps your file system to URL routes.² Here is the structure that matters:

my-app/
├── src/app/
│   ├── layout.tsx       # Root layout (nav, footer, shared UI)
│   ├── page.tsx         # Home page, maps to /
│   ├── about/
│   │   └── page.tsx     # About page, maps to /about
│   └── globals.css      # Global styles
├── public/              # Static assets (images, favicons)
├── next.config.ts       # Next.js configuration
├── tailwind.config.ts   # Tailwind configuration
└── tsconfig.json        # TypeScript configuration

Three rules govern routing:

1. page.tsx defines a route. Every folder with a page.tsx file becomes a URL segment.
2. layout.tsx wraps child routes. The root layout persists across all pages. Nested layouts wrap their children.
3. Components are Server Components by default. They render on the server unless you add 'use client' at the top of the file.²

This means you can fetch data directly inside your components without useEffect or client-side state management. The server handles it.

Step 3: Build Your First Pages

Replace the contents of src/app/page.tsx with:

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold">Hello, Next.js</h1>
      <p className="mt-4 text-lg text-gray-600">
        Your first page is live.
      </p>
    </main>
  )
}

Save the file. The browser updates instantly.

Now add a second route. Create the folder and file src/app/about/page.tsx:

export default function About() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold">About</h1>
      <p className="mt-4 text-lg text-gray-600">
        This page lives at /about. No router configuration required.
      </p>
    </main>
  )
}

Navigate to http://localhost:3000/about. The page renders. No configuration needed.

To link between pages, use the Link component:

import Link from 'next/link'

<Link href="/about">About</Link>

Link prefetches the target page in the background, so navigation feels instant.² Client-side transitions happen without a full page reload.

Step 4: Deploy to Production

Next.js deploys anywhere Node.js runs. The fastest path is Vercel, the platform built by the Next.js team.⁵

1. Push your project to a GitHub repository.
2. Go to vercel.com and sign in with GitHub.
3. Import your repository. Vercel auto-detects Next.js.
4. Click Deploy.

Within 30 seconds, your application is live on a public URL. Every subsequent push to main triggers a new deployment. Every pull request generates a preview URL.

For teams that prefer self-hosting, Next.js supports Docker containers, standalone Node.js servers, and platforms like Coolify, Railway, and AWS Amplify.

What to Build Next

You have a running Next.js application in production. Here is where to go from here:

• Data fetching. Use async Server Components to fetch from APIs or databases directly in your components.²
• Dynamic routes. Create [slug]/page.tsx for parameterised URLs like blog posts or product pages.
• Image optimisation. Replace <img> tags with next/image for automatic resizing, format conversion, and lazy loading.²
• ISR (Incremental Static Regeneration). Serve static pages that revalidate on a schedule. Static speed with dynamic freshness.²

Next.js scales from a single landing page to a full-stack application. The foundation you built today is the same foundation used by teams at scale. One framework. One deploy target. Ship it.

References

1. Companies using Next.js in 2026 (Landbase, 2026)
2. Getting Started: Installation (Next.js Docs, 2026)
3. Software Development Statistics 2026 (Keyhole Software, 2026)
4. App Router: Getting Started (Next.js Docs, 2026)
5. Vercel Usage Statistics 2026 (RaasCloud, 2026)