How to Create a Next Js App
Amitesh
Author
How to Create a Next.js App in 2026
Next.js remains one of the most popular React frameworks for building modern, production-ready web applications. In 2026, the recommended approach for starting a new Next.js project is to use the latest create-next-app CLI with the App Router.
Prerequisites
Before creating a Next.js application, make sure Node.js is installed on your machine.
Next.js currently requires Node.js 20.9 or later.
You can check your installed version with:
node -v
If Node.js is not installed, install a current LTS release from the official Node.js website.
Create a Next.js App
Open your terminal and run:
npx create-next-app@latest my-next-app
The CLI will ask you a few questions about how you want your project configured.
A good setup for a modern TypeScript project is:
- TypeScript: Yes
- ESLint: Yes
- Tailwind CSS: Yes
- Use
src/directory: Yes - Use App Router: Yes
- Customize import alias: Yes
- Import alias:
@/*
You can also let the CLI use its recommended defaults if you are not sure which options to choose.
Start the Development Server
After the project is created, move into the project directory:
cd my-next-app
Then start the development server:
npm run dev
Open:
http://localhost:3000
You should now see your new Next.js application.
Understanding the App Router
Modern Next.js applications use the App Router by default.
A basic project can look like this:
my-next-app/ ├── src/ │ └── app/ │ ├── layout.tsx │ ├── page.tsx │ └── globals.css ├── public/ ├── package.json ├── next.config.ts └── tsconfig.json
The app directory contains your routes and layouts.
For example:
src/app/about/page.tsx
creates the /about route.
Create Your First Page
Open:
src/app/page.tsx
and replace its contents with:
export default function Home() { return ( <main> <h1>Welcome to my Next.js app</h1> <p>Built with Next.js and TypeScript.</p> </main> ); }
Save the file and visit http://localhost:3000.
Next.js uses Fast Refresh during development, so your changes should appear automatically.
Server and Client Components
One of the important concepts in modern Next.js is the distinction between Server and Client Components.
Components are Server Components by default. If a component needs browser-only functionality such as useState, useEffect, event handlers, or certain browser APIs, add:
"use client";
at the top of that component.
For example:
"use client"; import { useState } from "react"; export default function Counter() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> Count: {count} </button> ); }
Use Client Components only where interactive behavior is required. Keeping more of your application on the server can help reduce the amount of JavaScript sent to the browser.
Add a New Route
To create an /about page:
src/app/about/page.tsx
Add:
export default function AboutPage() { return ( <main> <h1>About</h1> <p>This is the about page.</p> </main> ); }
Now visit:
http://localhost:3000/about
Add Metadata
Next.js provides a Metadata API for SEO and social sharing.
For example, in src/app/layout.tsx:
import type { Metadata } from "next"; export const metadata: Metadata = { title: "My Next.js App", description: "A modern web application built with Next.js.", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body>{children}</body> </html> ); }
You can also define metadata for individual pages.
Build for Production
When your application is ready, create a production build:
npm run build
Then run the production server:
npm start
Before deploying, make sure environment variables, API URLs, authentication, images, and production-specific configuration are correctly configured.
Deploy Your Next.js App
Next.js works particularly well with Vercel, but it can also be deployed to other platforms that support Node.js or Next.js.
For a Vercel deployment, you can connect your Git repository and let the platform detect the Next.js project automatically.
Conclusion
Creating a Next.js application in 2026 is straightforward:
npx create-next-app@latest my-next-app cd my-next-app npm run dev
From there, the App Router gives you a modern foundation for building pages, layouts, Server Components, Client Components, APIs, metadata, and full-stack features.
If you're starting a new React project today, Next.js is a strong choice when you want a framework that handles routing, rendering, optimization, and production tooling without having to configure everything yourself.
Quick Reference
# Create app npx create-next-app@latest my-next-app # Enter project cd my-next-app # Start development npm run dev # Production build npm run build # Start production server npm start