Setup Options

Next.js Setup Options

When you run npx create-next-app@latest, the command asks a few questions. These options affect the project structure and tools. This lesson explains each option with the recommended choice for beginners.

Common Setup Options

1. What is your project named?

   Type a name like my-next-app. This creates a folder with the same name.

2. Would you like to use TypeScript?

   For beginners: choose No. TypeScript adds extra type rules. You can learn it later after you are comfortable with JavaScript and Next.js.

3. Would you like to use ESLint?

   Choose Yes. ESLint helps you find mistakes in your code early.

4. Would you like to use Tailwind CSS?

   Choose Yes. Tailwind makes it easy to style components using utility classes.

5. Would you like to use src directory?

   Choose No for simplicity. Your files will be inside the app folder at the root.

6. Would you like to use App Router?

   Choose Yes. App Router is the modern way to build Next.js 13+ applications.

7. Would you like to customize the default import alias?

   Choose No. Keep the default @/* alias for imports.

Recommended Choices for Beginners

Project name: my-next-app
TypeScript: No
ESLint: Yes
Tailwind CSS: Yes
src directory: No
App Router: Yes
Import alias: No

What Each Option Means

• TypeScript adds type checking to JavaScript. Useful for larger teams but optional for beginners.
• ESLint checks your code for errors and bad practices.
• Tailwind CSS is a CSS framework that lets you style using small class names.
• src directory moves your code into a src folder. Beginners can keep it off.
• App Router is the new file based routing system. It is the recommended choice for new projects.
• Import alias lets you use short paths for imports. The default is good.

Practice

Create a new Next.js project and answer each question. Compare your answers with the recommended choices above.

Common Mistake

Beginners sometimes enable TypeScript before learning JavaScript well. This can lead to confusing errors. Turn TypeScript off when you are just starting.