How to Set Up a Next.js Project from Scratch

Install Node.js and Prerequisites

Ensure you have Node.js version eighteen or later installed on your system. Download the latest LTS version from nodejs.org or use a version manager like nvm to install and switch between Node.js versions easily. Verify your installation by running node --version and npm --version in your terminal. You should also have Git installed for version control. If you prefer pnpm or yarn over npm as your package manager, install your preferred tool globally. Having the correct runtime environment configured before starting prevents frustrating compatibility issues during project setup.

Create the Next.js Application

Open your terminal and run npx create-next-app@latest followed by your project name. The CLI will ask you several configuration questions. Select Yes for TypeScript to get type safety throughout your project. Choose Yes for ESLint to enable code linting. Select Yes for Tailwind CSS if you want utility-first styling. Choose Yes for the src/ directory to keep your source code organized separately from configuration files. Select Yes for the App Router to use the latest Next.js routing system with React Server Components support. Choose your preferred import alias, typically the default @ symbol.

Understand the Project Structure

Navigate into your newly created project directory and familiarize yourself with the file structure. The src/app directory contains your routes, layouts, and pages using the App Router convention. Each folder inside app represents a URL segment, and page.tsx files define the content rendered at that route. The layout.tsx file in the app root wraps all pages with shared UI elements like headers and footers. The public directory holds static assets like images and favicons. Configuration files including next.config.ts, tsconfig.json, tailwind.config.ts, and package.json live in the project root.

Configure Environment Variables

Create a .env.local file in your project root to store environment-specific configuration values like API keys, database connection strings, and third-party service credentials. Variables prefixed with NEXT_PUBLIC_ are exposed to the browser and can be accessed in client components, while unprefixed variables are only available on the server side in API routes, server components, and middleware. Never commit .env.local to version control. Create a .env.example file listing all required variable names without values so other developers know which environment variables they need to configure when setting up the project.

Set Up Your Development Workflow

Run npm run dev to start the development server on localhost port 3000. Next.js includes Fast Refresh which instantly reflects code changes in the browser without losing component state. Install recommended VS Code extensions including the ESLint extension for real-time linting feedback, Tailwind CSS IntelliSense for class name autocomplete, and Prettier for consistent code formatting. Configure your editor to format on save by adding the appropriate settings to your VS Code workspace configuration. Set up a pre-commit hook using Husky and lint-staged to automatically lint and format code before every commit.

Add Essential Pages and Layouts

Build out the basic page structure of your application. Create your root layout in src/app/layout.tsx with the HTML document structure, global styles, font configuration, and metadata. Build your home page in src/app/page.tsx. Create additional route segments by adding folders with page.tsx files, such as src/app/about/page.tsx for an about page. Implement a loading.tsx file for streaming loading states and an error.tsx file for error boundaries. Add a not-found.tsx file to customize the 404 page. Create a reusable navigation component and include it in your root layout.

Deploy to Vercel

Push your project to a GitHub repository using git init, git add, git commit, and git push commands. Then visit vercel.com and sign in with your GitHub account. Click New Project and import your repository. Vercel automatically detects the Next.js framework and configures the build settings. Add your environment variables in the Vercel dashboard under the project's Environment Variables settings. Click Deploy and Vercel will build and deploy your application with a production URL. Every subsequent push to your main branch triggers an automatic deployment, and pull requests get their own preview URLs for testing changes before merging.