Start a new NextJS project

This in this tutorial we will learn how to create a new NextJS project, setup everythings and then start our server.

Quick start

We will quickly move on to creating a new Next project by automatic installation from Next Office.

Choose the folder

Choose the folder where you want to store your source codes. Please note that do not store your source on the public folders or deskstop, or any folder that can be easy see by other peoples (it is just for security).

For example:

bash
user/work-space/source-code/

Create a new project

Run this command to create a new Next project:

bash
npx create-next-app@latest

When install, you will see some questions like that:

bash
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? @/*

I recommend use all recommend from NextJS: use TypeScript, Eslint, Tailwind CSS, App Router.

Start server

After download and installing we have the source code like that:

Open your terminal to run start server command:

bash
yarn dev

This command is defined on the package.json:

After that, go into the browser and type: http://localhost:3000 to see the result: