126 Views

Next.js, built on the React framework, powers some of the world’s largest companies’ web applications. It enables developers to create full-stack web applications by extending the latest React features. With built-in optimizations for images, fonts, and scripts, as well as powerful features like client and server-side rendering, caching options, and incremental static regeneration on a per-page level, Next.js is a robust choice for modern web development.

In this guide, we’ll walk you through the installation process for Next.js 14, the latest version. Whether you prefer an automatic setup or manual installation, we’ve got you covered.

Automatic Installation with Create-Next-App

The recommended way to install a new Next.js application is by using create-next-app. This tool sets up everything you need for a new project. Here’s how to get started:

Step 1: Run the Installation Command

Execute the following command in your terminal:

bash

Copy code

npx create-next-app@latest

Step 2: Follow the Prompts

You’ll encounter several prompts during the setup process. Here’s an example:

vbnet

Copy code

Need to install the following packages:
create-next-app@14.0.4
Ok to proceed? (y) y
✔ 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 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

Select the options based on your project requirements. For example:

bash

Copy code

npx create-next-app@latest my-app –ts –tailwind –eslint –app –src-dir –import-alias @

Explanation of Options

  • my-app: Name of your application.
  • –ts: Enables TypeScript. Use –js for JavaScript.
  • –tailwind: Includes Tailwind CSS.
  • –eslint: Configures ESLint.
  • –app: Uses the App Router (highly recommended).
  • –src-dir: Uses the src directory. The App directory will be in the src directory.
  • –import-alias @: Sets the default import alias.

For more options, run:

bash

Copy code

npx create-next-app@latest –help

Manual Installation

If you prefer a more hands-on approach, you can install and set up Next.js manually. Follow these steps to create a new Next.js application using the App Router.

Step 1: Install Dependencies

Install Next.js, React, React DOM, and optionally TypeScript:

bash

Copy code

npm install next@latest react@latest react-dom@latest typescript

Step 2: Configure package.json

Open your package.json file and add the following scripts:

json

Copy code

“scripts”: {  “dev”: “next dev”,  “build”: “next build”,  “start”: “next start”,  “lint”: “next lint” }

These scripts enable various development and deployment functionalities:

  • dev: Runs Next.js in development mode.
  • build: Builds the application for production.
  • start: Starts a Next.js production server.
  • lint: Sets up Next.js’ built-in ESLint configuration.

Step 3: Create the App Directory

Next.js uses file-system routing, where the routes of your application are determined by the file structure. Create an app/ folder for your project. For example, creating an about directory will result in the URL path http://localhost:3000/about.

Step 4: Set Up Layout and Page Files

Create a layout.tsx file inside the app/ folder. This will serve as the root layout for your application:

tsx

Copy code

// app/layout.tsx export default function RootLayout({  children, }: {  children: React.ReactNode }) {  return (    <html lang=”en”>      <body>{children}</body>    </html>  ) }

Next, create a page.tsx file for the home page:

tsx

Copy code

// app/page.tsx export default function Page() {  return <h1>Hello, Next.js!</h1> }

Step 5: Run the Development Server

To start the development server, execute:

bash

Copy code

npm run dev

Open your browser and navigate to http://localhost:3000 to see your application in action.

Step 6: Build for Production

To build the application for production, run:

bash

Copy code

npm run build

That’s it! You’ve successfully installed and created a new Next.js app. For more details, refer to the official Next.js documentation. Additionally, many of these concepts are covered in our learning platform, providing in-depth knowledge and examples.

This guide aims to provide a clear and detailed process for installing Next.js 14, ensuring that you can start developing your next project with ease. Happy coding!