Next.js Project Setup & Configuration

Q: How do you create a new Next.js project from scratch?

You run the create-next-app command in your terminal, which walks you through a few setup questions like whether you want TypeScript or Tailwind CSS, and then generates a fully working project structure with all the necessary configuration files already in place.

Q: What is the purpose of the next.config.js file in a Next.js project?

The next.config.js file lets you customize how your Next.js application builds and runs, controlling things like allowed image domains, custom redirects, environment variable exposure, and various build optimizations, all in one central configuration file.

Q: How is the folder structure organized differently between the App Router and the Pages Router?

The App Router uses an app folder where each folder represents a route segment and special files like page.js, layout.js, and loading.js define behavior, while the Pages Router uses a pages folder where each file directly corresponds to a route, with special files like _app.js and _document.js controlling global behavior.

Q: How do you configure custom path aliases in a Next.js project so you can write cleaner import statements?

You add a paths configuration inside your tsconfig.json or jsconfig.json file, mapping a short alias like @/components to your actual folder path, letting you write shorter, cleaner import statements that do not need long relative paths with many dots and slashes.

Q: How would you set up a Next.js project to support absolute imports, custom webpack configuration, and multiple environments cleanly?

You configure path aliases in your tsconfig.json for absolute imports, extend the webpack configuration function inside next.config.js for any custom build behavior you need, and organize separate environment files for development, staging, and production, keeping your project scalable and maintainable as it grows.

5 questions found

How do you create a new Next.js project from scratch?

Beginner

You run the create-next-app command in your terminal, which walks you through a few setup questions like whether you want TypeScript or Tailwind CSS, and then generates a fully working project structure with all the necessary configuration files already in place.

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

Real-world example A developer starting a new personal blog project runs create-next-app, answers a few quick setup questions, and has a working development server running within a couple of minutes.

Common follow-ups: What options does create-next-app ask you to choose during setup?;What is the difference between the App Router and Pages Router options during setup?

Routing (App/Pages Router);TypeScript with Next.js

What is the purpose of the next.config.js file in a Next.js project?

Beginner

The next.config.js file lets you customize how your Next.js application builds and runs, controlling things like allowed image domains, custom redirects, environment variable exposure, and various build optimizations, all in one central configuration file.

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [{ protocol: 'https', hostname: 'cdn.example.com' }]
  }
};

module.exports = nextConfig;

Real-world example A team enables React strict mode and configures allowed image domains in their next.config.js file, centralizing important project wide settings in a single, easy to find location.

Common follow-ups: What common settings are typically found in next.config.js?;Do changes to next.config.js require restarting the development server?

Image & Font Optimization;Deployment

How is the folder structure organized differently between the App Router and the Pages Router?

Intermediate

The App Router uses an app folder where each folder represents a route segment and special files like page.js, layout.js, and loading.js define behavior, while the Pages Router uses a pages folder where each file directly corresponds to a route, with special files like _app.js and _document.js controlling global behavior.

// App Router structure
// app/blog/[slug]/page.js

// Pages Router structure
// pages/blog/[slug].js

Real-world example A team migrating an older project carefully maps their existing pages folder structure to the new app folder conventions, understanding how routes and special files correspond between the two systems.

Common follow-ups: Can the App Router and Pages Router coexist in the same project?;Which router is recommended for new Next.js projects today?

Routing (App/Pages Router);Layouts & Templates

How do you configure custom path aliases in a Next.js project so you can write cleaner import statements?

Intermediate

You add a paths configuration inside your tsconfig.json or jsconfig.json file, mapping a short alias like @/components to your actual folder path, letting you write shorter, cleaner import statements that do not need long relative paths with many dots and slashes.

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

// Usage
import Button from '@/components/Button';

Real-world example A large project sets up a clean @ alias pointing to its source folder, letting every file import shared components without long, hard to read relative paths like ../../../components.

Common follow-ups: Does this configuration work the same way in both JavaScript and TypeScript projects?;What happens if two different aliases accidentally point to overlapping folders?

TypeScript with Next.js;Next.js Project Setup & Configuration

How would you set up a Next.js project to support absolute imports, custom webpack configuration, and multiple environments cleanly?

Advanced

You configure path aliases in your tsconfig.json for absolute imports, extend the webpack configuration function inside next.config.js for any custom build behavior you need, and organize separate environment files for development, staging, and production, keeping your project scalable and maintainable as it grows.

// next.config.js
module.exports = {
  webpack: (config) => {
    config.resolve.alias['@utils'] = path.join(__dirname, 'utils');
    return config;
  }
};

Real-world example A growing startup sets up absolute imports, a small custom webpack tweak for handling special file types, and clean environment separation, keeping their expanding codebase organized and easy for new developers to understand.

Common follow-ups: When would you need to customize the webpack configuration directly instead of using built-in Next.js features?;How do you test that a custom webpack configuration does not break the production build?

Environment Variables & Configuration Management;Turbopack & Build Performance