How to create Next.js app?

Next.js 14 introduces the App Router, which is a significant improvement over the traditional Pages Router, bringing more flexibility, performance optimizations, and a streamlined structure for modern web applications. This version offers a completely new way of handling routing, making it easier to manage complex applications with dynamic paths, server components, and API routes. In this tutorial, we'll guide you step by step through installing and setting up a Next.js 14 App Router application, providing a practical walkthrough of each configuration prompt you’ll encounter during the setup process.

Pre-requisites for Installing Next.js 14

Ensure you have the following before beginning:

• Node.js: Version 18 or higher. Confirm by running:

  node -v

• Package Manager: Either npm (included with Node.js) or yarn.

Step-by-Step Installation Process

1. Create a New Next.js 14 App Router Project: Open your terminal and navigate to the directory where you want to create your project. Then, run the following command:

   npx create-next-app@latest

   Replace my-next-app with your preferred project name. The --experimental-app flag ensures you're using the App Router.

$ npx create-next-app@latest
✔ **What is your project named?** … recipe-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 to use** **`src/` directory****?** … No / Yes
✔ **Would you like to use** **App Router****? (recommended)** … No / Yes
✔ **Would you like to customize the default** **import alias** **(@/*)?** … No / Yes
Creating a new Next.js app in /Users/rohitkumarkhatri/git/blogging-apps-folders/recipe-app.
**Using npm.**
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next

Success! Created recipe-app at /Users/rohitkumarkhatri/git/blogging-apps-folders/recipe-app

cd recipe-app

Verifying the Installation

To ensure everything works, run:

npm run dev

or if you're using Yarn:

yarn dev

Go to http://localhost:3000 in your browser. If the default Next.js screen appears, your setup is successful.

Opening in VS Code

Running the Application

During development, you can always run your app with:

npm run dev

$ npm run dev

> recipe-app@0.1.0 dev
> next dev

  ▲ Next.js 14.2.14
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 1622ms

What you see in the browser is coming from here...

Summary

By following this guide, you've installed a Next.js 14 App Router project, completed all the setup prompts, and verified your installation. You're now ready to build your application using the latest features of Next.js 14.