---
title: Installation
description: "Create a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file."
url: "https://nextjs.org/docs/14/getting-started/installation"
version: 14.2.35
lastUpdated: 2024-08-22
prerequisites:
- "Getting Started: /docs/14/getting-started"
related:
- getting-started/project-structure
---
System Requirements:
* [Node.js 18.17](https://nodejs.org/) or later.
* macOS, Windows (including WSL), and Linux are supported.
## Automatic Installation
We recommend starting a new Next.js app using [`create-next-app`](/docs/app/api-reference/create-next-app), which sets up everything automatically for you. To create a project, run:
```bash filename="Terminal"
npx create-next-app@latest
```
On installation, you'll see the following prompts:
```txt filename="Terminal"
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? @/*
```
After the prompts, `create-next-app` will create a folder with your project name and install the required dependencies.
> **Good to know**:
>
> * Next.js now ships with [TypeScript](/docs/app/building-your-application/configuring/typescript), [ESLint](/docs/app/building-your-application/configuring/eslint), and [Tailwind CSS](/docs/app/building-your-application/styling/tailwind-css) configuration by default.
> * You can optionally use a [`src` directory](/docs/app/building-your-application/configuring/src-directory) in the root of your project to separate your application's code from configuration files.
## Manual Installation
To manually create a new Next.js app, install the required packages:
```bash filename="Terminal"
npm install next@latest react@latest react-dom@latest
```
Open your `package.json` file and add the following `scripts`:
```json filename="package.json"
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}
```
These scripts refer to the different stages of developing an application:
* `dev`: runs [`next dev`](/docs/app/api-reference/next-cli#development) to start Next.js in development mode.
* `build`: runs [`next build`](/docs/app/api-reference/next-cli#build) to build the application for production usage.
* `start`: runs [`next start`](/docs/app/api-reference/next-cli#production) to start a Next.js production server.
* `lint`: runs [`next lint`](/docs/app/api-reference/next-cli#lint) to set up Next.js' built-in ESLint configuration.
### Creating directories
Next.js uses file-system routing, which means the routes in your application are determined by how you structure your files.
#### The `app` directory
For new applications, we recommend using the [App Router](/docs/app). This router allows you to use React's latest features and is an evolution of the [Pages Router](/docs/pages) based on community feedback.
Create an `app/` folder, then add a `layout.tsx` and `page.tsx` file. These will be rendered when the user visits the root of your application (`/`).
Create a [root layout](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) inside `app/layout.tsx` with the required `` and `` tags:
```tsx filename="app/layout.tsx" switcher
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
```jsx filename="app/layout.js" switcher
export default function RootLayout({ children }) {
return (
{children}
)
}
```
Finally, create a home page `app/page.tsx` with some initial content:
```tsx filename="app/page.tsx" switcher
export default function Page() {
return Hello, Next.js!
}
```
```jsx filename="app/page.js" switcher
export default function Page() {
return Hello, Next.js!
}
```
> **Good to know**: If you forget to create `layout.tsx`, Next.js will automatically create this file when running the development server with `next dev`.
Learn more about [using the App Router](/docs/app/building-your-application/routing/defining-routes).
#### The `pages` directory (optional)
If you prefer to use the Pages Router instead of the App Router, you can create a `pages/` directory at the root of your project.
Then, add an `index.tsx` file inside your `pages` folder. This will be your home page (`/`):
```tsx filename="pages/index.tsx" switcher
export default function Page() {
return Hello, Next.js!
}
```
Next, add an `_app.tsx` file inside `pages/` to define the global layout. Learn more about the [custom App file](/docs/pages/building-your-application/routing/custom-app).
```tsx filename="pages/_app.tsx" switcher
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return
}
```
```jsx filename="pages/_app.js" switcher
export default function App({ Component, pageProps }) {
return
}
```
Finally, add a `_document.tsx` file inside `pages/` to control the initial response from the server. Learn more about the [custom Document file](/docs/pages/building-your-application/routing/custom-document).
```tsx filename="pages/_document.tsx" switcher
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (