03 / 03

How do you create a new Next.js project?

Open your terminal and run the following command to create a new Next.js project using the official Next.js command-line tool called create-next-app

javascript
Difficulty: 3/10
Topics: project-scaffolding, configuration-choices, monorepos

Scenario Questions

0-2 years experience
  1. 1

    Imagine you're starting a new Next.js project from scratch using create-next-app. The CLI prompts you about using the 'src/' directory and the App Router. How do you decide whether to enable these, and what does the resulting folder structure look like if you say yes to both?

  2. 2

    You just ran create-next-app to start a small landing page, but your team wants to use Tailwind CSS and TypeScript. If you forgot to select them during the CLI prompt, how would you manually integrate them into your newly created project without starting over?

2-5 years experience
  1. 1

    We are spinning up a new marketing site that needs to share UI components with our main product. When initializing this new Next.js app, how would you configure the project structure and import aliases to make sharing components from an external local folder as seamless as possible?

  2. 2

    Your team is migrating a legacy React SPA to Next.js. Instead of using create-next-app to start fresh, you decide to manually install next, react, and react-dom in the existing repo. What are the critical configuration files and routing directory structures you must set up manually to get the Next.js dev server running correctly?

5-8 years experience
  1. 1

    Instead of having developers run create-next-app for every new micro-frontend or landing page, we want to establish a standardized internal Next.js boilerplate for the company. What custom configurations, CI/CD hooks, linting/formatting rules, and security defaults would you bake into this template, and how would you distribute it?

  2. 2

    We are setting up a Turborepo monorepo that will house three different Next.js applications sharing a common design system package. How would you structure the initialization of a new Next.js app within this monorepo to ensure fast local caching, shared Tailwind configurations, and independent deployments?

8+ years experience
  1. 1

    Our organization has 50+ legacy React and Next.js Pages Router applications scattered across different repositories. We need to define a paved-path migration strategy to transition these to a unified Next.js App Router architecture over the next year. How would you design the scaffolding tooling and architectural guardrails to ensure teams can migrate incrementally without disrupting feature delivery?

  2. 2

    When bootstrapping a massive, multi-tenant Next.js platform that serves thousands of white-labeled client sites, the standard create-next-app architecture falls short on dynamic routing and build-time scaling. How would you architect the initial project setup, middleware, and build pipeline to support dynamic tenant configurations without rebuilding the entire app for every client change?

Follow-up Questions

  • If you choose the App Router during setup, how does that change your approach to layout nesting compared to the old Pages Router _app.js pattern?
  • How do you handle environment variables during the initial setup to ensure secrets aren't leaked to the client-side bundle?
  • What are the performance implications of choosing Turbopack via the --turbo flag during your local development setup?