Courses
Next.js
Installation

Installing Next.js

Prerequisite:

Automatic Installation

It's recommended to create a new Next.js app using create-next-app, which sets up everything automatically for you. To create a project, run:

>_ Terminal
npx create-next-app@latest

On installation, you'll see the following prompts:

>_ Terminal
What is your project named? my-app
Would you like to use TypeScript with this project? No / Yes
Would you like to use ESLint with this project? No / Yes
Would you like to use Tailwind CSS with this project? No / Yes
Would you like to use `src/` directory with this project? No / Yes
Use App Router (recommended)? No / Yes
Would you like to customize the default import alias? No / Yes

After the prompts, create-next-app will create a folder with your project name and install the required dependencies.

Manual Installation

To manually create a new Next.js app, install the required packages:

>_ Terminal
npm install next@latest react@latest react-dom@latest

Open package.json and add the following scripts:

package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

These scripts refer to the different stages of developing an application:

  • dev : runs next dev to start Next.js in development mode.
  • build : runs next build to build the application for production usage.
  • start : runs next start to start a Next.js production server.
  • lint : runs next lint to set up Next.js' built-in ESLint configuration.

Create the app folder

Next, create an app folder and add a layout.tsx and page.tsx file. These will be rendered when the user visits the root of your application.

Create a root layout inside app/layout.tsx with the required <html> and <body> tags:

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

Finally, create a home page app/page.tsx with some initial content:

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

Create the public folder

You can optionally create a public folder to store static assets such as images, fonts, etc. Files inside public directory can then be referenced by your code starting from the base URL (/).

Run the Development Server

  1. Run npm run dev to start the development server.
  2. Visit http://localhost:3000 to view your application.
  3. Edit app/layout.tsx or app/page.tsx and save to see the updated result in your browser.
OverviewProject Structure