Next.js Project Setup Guide 2025: From Initialization to Deployment

Next.js 15 has introduced powerful features that make building modern web apps easier than ever. Whether you're new to Next.js or upgrading from an older version, this guide will help you set up your project with modern tooling like TypeScript, Tailwind CSS, ESLint, and deploy it with ease.

🛠 Prerequisites

Node.js v18 or later
npm / yarn / pnpm
Basic understanding of React

🚀 Initialize a New Project

Run this command to scaffold a new project:

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

Choose the following options:

Yes to TypeScript
Yes to Tailwind CSS
Yes to App Router
Yes to ESLint and src/ directory

📁 Project Structure

Your app will have this structure:

/app – App Router pages and layouts
/components – Reusable components
/public – Static assets
/styles – Global CSS
tailwind.config.ts, tsconfig.json, etc. – Config files

💨 Tailwind CSS

Already configured if you selected it, but here’s the manual setup:

npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init -p

Update tailwind.config.ts:

content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ]

And import Tailwind in globals.css:

@tailwind base;
  @tailwind components;
  @tailwind utilities;

🔍 ESLint & Prettier

For clean code and consistency:

npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier

Create .eslintrc.json:

{
    "extends": ["next/core-web-vitals", "plugin:prettier/recommended"]
  }

And a simple .prettierrc:

{
    "semi": true,
    "singleQuote": true
  }

⚙️ Adding Environment Variables

Use .env.local for private keys:

NEXT_PUBLIC_API_URL=https://api.example.com

Access them via process.env.NEXT_PUBLIC_API_URL.

📦 Useful Scripts

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }

🌐 Deployment

You can deploy your app to:

Vercel: Official and best for Next.js
Netlify: Great support via adapters
Docker: For containerized deployment

To deploy on Vercel:

Push code to GitHub
Go to vercel.com and import repo
Set environment variables and click "Deploy"

✅ Final Thoughts

Setting up a modern Next.js project in 2025 is simpler than ever. With features like the App Router, integrated Tailwind CSS, and first-class TypeScript support, you're ready to build high-performance applications out of the box.

Follow these best practices and start deploying your ideas faster with a clean, scalable, and maintainable codebase.