Install Next.js

Create a new Next.js app and run it locally.

Quick start

Create a new project

Run the following command to create a new Next.js app named my-app.

npx create-next-app@latest my-app --yes

--yes skips prompts using saved preferences or defaults. The default setup enables TypeScript, Tailwind, ESLint, App Router, and Turbopack, with import alias @/*.

Start the server

Navigate to the project directory and start the development server.

cd my-app
npm run dev

Visit your app

Open http://localhost:3000 in your browser to see the result.

System requirements

Before you begin, make sure your development environment meets the following requirements:

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

Create with the CLI

The quickest way to create a new Next.js app is using the automatic setup tool.

Run the command

npx create-next-app@latest

Answer Prompts

On installation, you'll see the following prompts:

What is your project named? my-app
Would you like to use the recommended Next.js defaults?
    Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router, Turbopack
    No, reuse previous settings
    No, customize settings - Choose your own preferences

If you choose to customize settings, ensure you select Tailwind CSS as Yes.

Manual installation

To manually create a new Next.js app, follow these steps:

Install packages

npm i next@latest react@latest react-dom@latest

Add scripts

Add the following scripts to your package.json file:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint",
    "lint:fix": "eslint --fix"
  }
}

Create the app directory

Next.js uses file-system routing. Create an app folder and add a layout.tsx file:

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

Then create a page.tsx:

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

Set up TypeScript

RareUI components are written in TypeScript. We strongly recommend using TypeScript for the best experience.

Install TypeScript

Rename any .js file to .tsx and run next dev. Next.js will automatically detect TypeScript and create a tsconfig.json file.

Configure Path Aliases

Ensure your tsconfig.json has the following paths configured for clean imports:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
Previous
Next