Next.js Setup Explained — Project Scaffolding and Configuration

In this tutorial, you will learn about Next.js Setup Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Setting up a Next.js project is done with create-next-app, scaffolding a complete project with routing, configuration, TypeScript, ESLint, and build scripts.

What You'll Learn

• Creating a project with create-next-app
• Next.js project structure
• next.config.js configuration
• Environment variables
• TypeScript and ESLint setup

Why It Matters

Next.js's zero-config setup gets you productive immediately, while the configuration file enables advanced features like image domains, redirects, and Webpack customization.

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

// next.config.js
/** @type {import("next").NextConfig} */
const nextConfig = {
  images: {
    domains: ["images.example.com", "cdn.example.com"],
    formats: ["image/avif", "image/webp"],
  },
  redirects: async () => [
    { source: "/old-page", destination: "/new-page", permanent: true },
  ],
  headers: async () => [
    { source: "/(.*)", headers: [{ key: "X-Frame-Options", value: "DENY" }] },
  ],
};

module.exports = nextConfig;

Expected output: A working Next.js dev server at localhost:3000 with TypeScript, Tailwind CSS, and ESLint configured.