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!