Create a Hello World React App with Next.js

First, make sure Node.js is installed on your machine. Open your terminal. Run the following command to create a new Next.js project:

npx create-next-app@latest hello-world
cd hello-world

This command creates a new folder called hello-world. This folder contains a boilerplate Next.js project. The CLI will prompt you to select different options like using TypeScript or Tailwind CSS.

Start the Development Server

Run the following command to start the development server:

npm run dev

Now, open your browser. Go to http://localhost:3000. You'll see the Next.js welcome page.

Make a Change

Open the app/page.js (or TypeScript, if you selected that option) file in a text editor. Select all to delete the current contents of the file and paste in the following:

export default function Page() {
  return (
    <p>Hello, World!</p>
  )
}

Save the file. Your browser updates instantly. This is Fast Refresh in action. It updates the browser as you save files, with no server reload needed.

Start Building

You've now created a new Next.js app, updated it, and seen Fast Refresh in action. This helps you see changes instantly, making development faster and easier.

Learn more about how to use Next.js with our official tutorial, or get started from Next.js templates to kickstart your development. When you're ready, deploy to Vercel with zero configuration for Next.js and other frameworks.