How to create your first Next.js project in 5 minutes

Nikolaj Rask
4 min readSep 4, 2024

--

React and Next.js

What is Next.js

Next.js is a JavaScript/TypeScript framework for building websites. Next.js uses React.js and has built-in features like the app router, server-side rendering, caching, TypeScript integration, and more. Next.js makes it easier to build a full-stack web application than React because many of the components you need are already built into Next.js.

How to get started

Using this guide you can get started using Next.js in less than 5 minutes.

Installing Node.js

The first thing you need is to have Node.js version 18.18 installed on your computer. To download the latest stable version of Node.js click here.

Creating Next.js app

After installing Node.js you will be able to run npm and npx command in your terminal.

Using the command below you can create a Next.js project.

npx create-next-app@latest

After hitting “Enter,” you will be presented with some choices, the first being what you want to name your website.

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 name your project almost anything you want, but some of the other options will have a bigger impact on your project.
These are the options I would choose when creating a project:

Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like your code inside a `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for `next dev`? Yes
Would you like to customize the import alias (`@/*` by default)? No

The only things I would ever change are whether or not I want to use TypeScript and Tailwind CSS. For example, when building smaller projects, I prefer using JavaScript over TypeScript. For larger projects, I would use another styling option instead of Tailwind, usually Sass. However, these options are good choices for most websites.

Editing your website

If you don’t have a code editor installed I would recommend installing Visual Studio Code

After creating your Next.js project, you need to open it in a code editor. I use Visual Studio Code. You can open your project by using these commands in your terminal:

cd my-app
code .

Once you have the project opened in VSCode, you will see your folder tree on the left.

To change the content on the website, you will need to edit the page.tsx file in the src/app directory.

Before editing your code, you need to start a development server so you can see your changes in real time. This can be done using the following command:

npm run dev

This will open a development server on http://localhost:3000 or another port if port 3000 is already in use.

This is what you will see after starting the development server. To edit the content on the webpage, you will need to modify the page.tsx file. In this file, you can write TSX content. If you are not familiar with writing TSX or JSX, you can click on "Docs" and "Learn" at http://localhost:3000to learn more about how to use Next.js and TSX.

Conclusion

For now, I’ll leave the rest of the learning up to you, but you now know how to set up the foundation for a solid Next.js project. The learning curve for Next.js is generally not very steep, and even if you’re a complete beginner in web development, you should be able to learn how to use Next.js fairly quickly. To ensure you’re not left completely empty-handed, I’ll share the first tutorial I watched when I first learned Next.js here.

--

--

Nikolaj Rask
Nikolaj Rask

Written by Nikolaj Rask

Hey 👋 I am Nikolaj Rask, I am a 20 year old self-taught software developer who likes to share my knowledge.

No responses yet