Next.js Create Next App

Create Next App is the official CLI tool provided by Vercel to quickly set up a new Next.js project with zero configuration.

• Instantly scaffolds a fully functional Next.js app with best practices built-in.
• Supports TypeScript, ESLint, Tailwind CSS, and App Router setup out of the box.
• Saves development time by handling configuration, routing, and project structure automatically.

System Requirements:

• Node.js 12.22.0 or later
• NPM 6.14.4 or later OR Yarn 1.22.10 or later
• macOS, Windows, and Linux are supported

Getting started with Create Next App

Let's see the installation process:

Step 1: Installation and Setup

Installation of next.js require npm and node.js. You can install node.js from here. Confirm the installation by running these commands on the terminal. 

node -v
npm -v

Step 2: create-next-app

• The easiest way to get started with Next.js is by using create-next-app.
• With CLI(command line) tool you can quickly start building a new Next.js application.
• Just like React Js go to the command line and type npx/npm create next-app which will start installing a new Next Js application on your PC with everything set up for you.

To get started, use the following command:

npx create-next-app@latest

#  Create Next App can be installed via yarn:
yarn create next-app

# Create Next App can be installed via npm:
npm create next-app

Step 3: Create TypeScript Project

You can create a TypeScript project with the --ts (--typescript flag):

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts

Step 4: Configure Project

choose options based on your requirement

√ What is your project named? ... my-app
√ 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

Project Structure:

The dependencies for nextjs project in the package.json file are:

"dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.5"
},
"devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18"
}

Example: This demonstrate a next.js demo app created using the create-next-app command.

// Filename - pages/index.tsx 

import React from "react";
import Link from "next/link";

export default class extends React.Component {
    render() {
        return (
            <div>
                <h1>
                	Welcome! You are ready to 
                    build a Next Js app.
				</h1>
            </div>
        );
    }
}

Steps to run the application: Write the below code in the terminal to run the application:

npm run dev
# OR
yarn dev

Output:

Now, you can make changes at pages/index.js and see the updated result in your browser/localhost. And now you are ready to start using Next Js for building an interactive website.