August 4, 2024

Prerequisites

To create a next.js application you need to have Node.js installed on your machine. You can download Node.js from the official website here.

Creating a next.js application

The easiest way to create a next.js application is by using the create-next-app command. You can run this command using npx like this:

npx create-next-app

This command will guide you through the process of creating a new next.js application.

If you want you can also run create-next-app non-interactively. Which parameters are available you can run:

create-next-app --help

We will create our next.js application with the following command:

npx create-next-app my-next-js-app --ts --eslint --tailwind --src-dir --app --import-alias '@/*'

Running the next.js application

After you have created the next.js application you can run it using the following command:

cd my-next-js-app
npm run dev

This will start the development server and you can access your next.js application in the browser at http://localhost:3000.

> my-next-js-app@0.1.0 dev
> next dev
 
  ▲ Next.js 14.2.5
  - Local:        http://localhost:3000
 
 ✓ Starting...
 ✓ Ready in 2.1s

Conclusion

Starting a project with create-next-app is just the beginning. The real power of the framework lies in how you structure your data and where you choose to host your code.

What’s next for your project?

Organize your logic: Learn how to handle complex page structures in Mastering Next.js Routing: From Pages to Dynamic Segments.
Build a content engine: Turn your app into a high-performance site with Mastering Next.js Content: A Deep Dive into Static MDX Blogs.
Go live: Ready to share your work? See how to Deploy your Next.js application on Docker Hub.

How to create a next.js application with create-next-app

Prerequisites

Creating a next.js application

Running the next.js application

Conclusion

What’s next for your project?

Read Next.

How to deploy a next.js application on docker hub

Mastering Next.js Content: A Deep Dive into Static MDX Blogs

Mastering Next.js Routing: From Pages to Dynamic Segments