Next.js 14

To bootstrap a new Next.js 14 project, run the following command:

Terminal


npx create-next-app@latest my-app

We recommend that you leave all default options in the upcoming dialogue. After installation, open the my-app directory, for example with VS Code.

Terminal


code my-app

ESlint & Prettier

First, install Prettier:

Terminal


npm install -D prettier eslint-config-prettier eslint-plugin-prettier

Next, extend your ESLint config:

.eslintrc.json


{
  "extends": ["next/core-web-vitals", "plugin:prettier/recommended"]
}

Finally, add a .prettierrc.json to your project:

.prettierrc.json


{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

Now ESLint will automatically format your code according to your Prettier rules. In short: Your code will always look great. For more information, refer to our ESLint and Prettier guides.

Shadcn UI

Building React components doesn't need to be difficult. Since Tailwind is already installed, you can seamlessly integrate Shadcn UI into your project:

Terminal


npx shadcn-ui@latest init

Leave all options on their default values. After this, you will be able to install UI components like Buttons, Accordions and Dropdown Menus as easy as:

Terminal


npx shadcn-ui@latest add button
npx shadcn-ui@latest add accordion
npx shadcn-ui@latest add dropdown-menu

For more information, refer to our Shadcn UI guide.

TS Reset

Typescript out of the box sometimes behaves in unexpected ways. We recommend that you install TS Reset:

Terminal


npm i -D @total-typescript/ts-reset

Next, create a reset.d.ts file anywhere in your project:

reset.d.ts


import '@total-typescript/ts-reset'

Server Components

Server Components are a novel approach, where your components are not only prerendered, but fully rendered on the server and then streamed to the client. Components in Next.js 14 app directory are Server Components by default.

Client Components

Client Components were the default until Next.js 14, and you still need them in Next.js 14 when you want to

introduce interactivity (onClick, onChange, ...)
use hooks like useEffect or useState

You can make your component a client component by adding to the top of your file:

client-component.tsx


'use client'

Layouts

Layouts are shared across route segments. They are great to wrap your routes with common UI. There are 2 types of layouts:

Root Layout

app/layout.tsx


import { PropsWithChildren } from 'react'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}
export default function RootLayout({ children }: PropsWithChildren) {
  return (
    <html lang="en">
      <body className={`min-h-screen flex flex-col ${inter.className}`}>
        <nav>Navbar</nav>
        <div className="grow">{children}</div>
        <footer>Footer</footer>
      </body>
    </html>
  )
}

Every Next.js App needs a root layout containing the html and body tags.

Route Segment Layout

app/dashboard/layout.tsx


import { PropsWithChildren } from 'react'
export default function DashboardLayout({ children }: PropsWithChildren) {
  return (
    <>
      <aside>
        <nav>Sidebar Nav</nav>
      </aside>
      <main>{children}</main>
    </>
  )
}

Route Segment Layouts wrap the route they were defined in (/dashboard) as well as all child routes (e.g. /dashboard/settings)

Pages

Pages are file-based routes of your app. If you create a file app/dashboard/page.tsx, it will render the code for the route /dashboard:

app/dashboard/page.tsx


// `app/dashboard/page.tsx` is the UI for the `/dashboard` URL
export default function Page() {
  return <h1>Hello, Dashboard Page!</h1>
}

Deploy Next.js on Vercel

About Next.js 14

Next.js 14 Playground

Learn Next.js 14

Templates

Turbopack

Read the docs

Github Issues

Github Discussions

Ask a developer

ESlint & Prettier

Shadcn UI

TS Reset

Server Components

Client Components

Layouts

Root Layout

Route Segment Layout

Pages