MENU


Installation

The recommended way to start a new Next.js project is using 'create-next-app': npx create-next-app@latest

While npm is primarily a package manager for installing and managing Node.js packages, npx is a tool for executing Node.js binaries, either from local installations or directly from the npm registry. npx is particularly useful for running commands without the need to install them globally or as a development dependency.

Upon entering the command above, you will be prompted with a series of questions: What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like to use ESLint? No / Yes Would you like to use Tailwind CSS? No / Yes Would you like to use `src/` directory? No / Yes Would you like to use App Router? (recommended) No / Yes Would you like to customize the default import alias (@/*)? No / Yes What import alias would you like configured? @/*

  1. What is your project named? my-app
    After the prompts, create-next-app will create a folder with your project name and install the required dependencies there.

  2. Would you like to use TypeScript? No / Yes
    TypeScript is an extension of JavaScript that performs type checking to detect errors early in the development stage. You can use it in place of conventional JavaScript.

  3. Would you like to use ESLint? No / Yes
    ESLint is a static code analysis tool for identifying and fixing problems in JavaScript code. It is highly configurable and allows developers to define rules for their projects, enforcing a consistent coding style and catching potential errors early in the development process. ESLint is commonly used in conjunction with various code editors and integrated into build systems.

  4. Would you like to use Tailwind CSS? No / Yes
    Tailwind CSS is a popular utility-first CSS framework that provides a set of pre-designed styles and utility classes to streamline the process of building modern, responsive web interfaces. It's different from traditional CSS frameworks in that it doesn't come with predefined components but focuses on providing low-level utility classes that can be composed to create custom designs.

  5. Would you like to use `src/` directory? No / Yes
    You can optionally use a '/src' directory in the root of your project to separate your application's code from configuration files.

  6. Would you like to use App Router? (recommended) No / Yes
    This prompt allows you to choose between the traditional file-based routing system (Pages Router) and the newer, more flexible App Router. Using the Pages Router involves placing React components inside the 'pages' directory, with the component's filename corresponding to the route URL. For example, a component named About.tsx would be accessible at the /about route. App Router, introduced in Next.js v12, is a more advanced routing system that provides several advantages over file-based routing. It offers features like dynamic routing, route groups, and middleware, making it more suitable for complex applications. The prompt recommends using App Router because it offers a more modern and powerful approach to routing. However, file-based routing is still a viable option for simpler applications.

  7. Would you like to customize the default import alias (@/*)? No / Yes
    One of the prompts asks if you want to change the preconfigured import alias @/* in your Next.js project:
    No: Stick with the default @/* alias for all imports within your project root. The @/* default alias refers to any path inside the project root directory. It allows importing modules without repeating the root path. For example, instead of import Button from './src/components/Button', you can use import Button from '@/components/Button'. This is suitable for smaller projects or those with simple directory structures. If you're starting with Next.js or working on a simple project, the default @/* alias is sufficient.
    Yes: Customize and define multiple aliases for different parts of your project. This is more useful for larger projects with many directories requiring clearer organization. Consider customizing if you have a large codebase with multiple directories for clearer import paths and better code organization. This allows for creating additional aliases for specific directories or subdirectories and can be useful for segregating different parts of your project. For instance, you can set @components/* to refer to the components directory or @styles/* for the styles directory.
    see Configuring: Absolute Imports and Module Path Aliases - Next.js

  8. What import alias would you like configured? @/*
    If your answer was 'Yes' in Q7, you will be asked this question. The @/* import alias is a common and convenient way to shorten import statements in Next.js projects. It allows you to refer to files within your project's src directory using a concise alias instead of specifying the entire path. For instance, instead of importing a component from 'src/components/', you can import it from '@/components/'.
    see What import alias would you like configured? - DEV Community
To add more path aliases, edit tsconfig.json. Eg.: { "compilerOptions": { ... "baseUrl": ".", "paths": { "@/*": ["./*"], "@c/*": ["common/components/*"], "@s/*": ["shared/styles/*"], "@h/*": ["hooks/(v3)/*"] } }, ... }