Next.js

We recommend starting a new Next.js app using create-next-app, which sets up everything automatically for you. To create a project, run

Installation

System Requirements:

  • Node.js 18.17 or later.
  • macOS, Windows (including WSL), and Linux are supported.

Automatic Installation

We recommend starting a new Next.js app using create-next-app, which sets up everything automatically for you. To create a project, run:

Get Starter Template

npm
pnpm
bun
npx create-next-app@latest

On installation, you'll see the following prompts:

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? @/*

Install Dependencies

npm
pnpm
bun
npm install

Development Server

npm
pnpm
bun
npm run dev

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. This router allows you to use React's latest features and is an evolution of the Pages Router 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 (/).

demo

Create a root layout inside app/layout.tsx with the required <html> and <body> tags:

app/layout.tsx 
  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode
  }) {
    return (
      <html lang="en">
        <body>{children}</body>
      </html>
    )
  }

Finally, create a home page app/page.tsx with some initial content:

app/page.tsx 
  export default function Page() {
    return <h1>Hello, Next.js!</h1>
  }
Databases
In modern web development, the choice of a database and an O...
React