Next.js Create Next App (original) (raw)

Last Updated : 16 Jul, 2024

**In Next.js, the create next app command is used to automatically initialize a new NextJS project with the **default configuration, providing a streamlined way to build applications efficiently and quickly.

**System Requirements:

**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:

project-structure---next-typescript

Project Structure NEXT App

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 example demonstrate a next js demo app created using the create-next-app command.

JavaScript `

// Filename - pages/index.tsx

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

export default class extends React.Component { render() { return (

Welcome! You are ready to build a Next Js app.

); } }

`

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

npm run dev

OR

yarn dev

**Output:

browser window

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.