Skip to main content

Next.js - Getting Started

Next.js is a React framework that enables server-side rendering and static site generation for React applications. It is a popular choice for building web applications due to its ease of use and performance benefits.

In this tutorial, we will learn how to get started with Next.js.

Prerequisites​

Before we begin, make sure you have Node.js installed on your machine. You can download and install Node.js from the official website: https://nodejs.org.

Step 1: Create a New Next.js Project​

To create a new Next.js project, you can use the following command:

npx create-next-app@latest

On installation, you'll see the following prompts:

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 your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

You can choose the options based on your preferences. Once the project is created, navigate to the project directory:

cd my-app

Step 2: Run the Development Server​

To start the development server, run the following command:

npm run dev

This will start the development server at http://localhost:3000. You can open this URL in your browser to view the Next.js application.

http://localhost:3000
Next.js logo
  1. Get started by editing src/app/page.tsx.
  2. Save and see your changes instantly.
Vercel logomark  Deploy nowRead our docs

Conclusion​

In this tutorial, we learned how to get started with Next.js. We created a new Next.js project and ran the development server to view the application in the browser.