When you're new to coding or just new to Next.js, it can sometimes feel a bit overwhelming just to take the first step of starting a project.
If you want to try your hand at building a web app but don't know where to start, this post is going to outline the steps that I follow when I'm creating a new Next.js project.
Prerequisites
Before you can start a Next.js project, you'll need to confirm that you have Node.js and npm installed.
In your Terminal (how to open Terminal on Mac / how to open Terminal on Windows), run the following commands separately:
node -v
npm -v
You should get a response with a version number for each command. As of this writing, the current version of Node.js is v21.7.1 and the current version of npm is 10.5.0.
If you don't have Node.js and/or npm installed, you can follow the instructions here to install them.
Create The Project
Open your Terminal and cd into the directory where you want to initialize the project.
Personally, I use a folder named /Code/benorloff where I create my personal projects. I recommend having a dedicated folder for your projects, instead of creating them in /Desktop or /Downloads, for example.
Once you're in the directory that you've chosen, it's time to initialize the Next.js app.
Create Next App
Run the following command in your terminal to create a new Next.js app:
npx create-next-app@latest
You'll be prompted to answer some configuration questions during the installation process. You can name the project whatever you would like, but I recommend using the answers below for the remaining questions:
Once the installation is complete, be sure tocdinto the new project directory before continuing.
You can now open the project in your code editor of choice. Personally, I use Visual Studio Code.
Install Shadcn/ui Components (optional)
I typically use Shadcn as my UI component library, but you can skip this step and use a different component library or build your own components if you prefer.
If you want to use Shadcn for your UI components, run the following command:
npx shadcn-ui@latest init
Here are the answers I use for the installation prompts:
After installation is complete, you should see 2 new directories (/components and /lib) and a new file (components.json) in the root directory of your project.
Your project structure should now look like this (.next and node_modules directories not shown):
.
├── app
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── components
│ └── ui
│ ├── button.tsx
│ ├── card.tsx
│ ├── form.tsx
│ ├── input.tsx
│ └── label.tsx
├── lib
│ └── utils.ts
├── public
│ ├── next.svg
│ └── vercel.svg
├── .eslintrc.json
├── .gitignore
├── README.md
├── components.json
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.js
├── tailwind.config.ts
└── tsconfig.json
Finally, let's launch our app so we can view it in the browser:
npm run dev
Open your browser and go to localhost:3000. You should see the Next.js boilerplate page.
Congratulations! You've officially launched a Next.js app 🙌
Next Steps
