System Requirements:

To install Next.js, we need to set up our system for a Node.js environment since it is a React-based framework.

  • Node.js 16.8 or later.
  • Supported operating systems include Windows (including WSL), macOS, and Linux.

Step 1 - Installation

Have two methods for installing Next.js, including automatic and manual installation. We recommend that you use the automatic installation method because it will set up everything for you automatically.

Option 1 - Automatic Installation

To create a new project, run the following command:

npx create-next-app

During the installation process, you will encounter the following prompts:

√ 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

By default, Next.js includes configuration for TypeScript, ESLint, and Tailwind CSS. Additionally, you have the option to utilize the src directory for your application code.

Once you have completed the prompts, create-next-app will generate a folder with your specified project name and install the necessary dependencies for your project.

So you’re done, now move on to the Run Next.js Server section to run the application and check the results.

Option 2 - Manual Installation

Installing Packages and Adding Scripts

In order to create a new Next.js application manually, you will need to install the necessary packages.

npm install next react react-dom

To add the necessary scripts, navigate to the package.json file located in the root directory of your Next.js project and insert the following code:

  {
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

The entire package.json file will look like this:

  {
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "13.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

The scripts provided serve different purposes throughout the application development process:

  • dev: This script starts Next.js in development mode by executing “next dev” command.
  • build: This script builds the application for production usage by executing “next build” command.
  • start: This script starts a Next.js production server by executing “next start” command.
  • lint: This script configures Next.js’ built-in ESLint settings by executing “next lint” command.

Create the app folder

In this tutorial series, we will be using TypeScript to leverage its advantages. Nonetheless, you have the option to use JavaScript for your Next.js projects, and we will provide examples in both languages.

Create an app folder and include a layout.tsx and page.tsx file. These files will be displayed when a user visits the root of your application.

If you prefer to use JavaScript, instead of creating layout.tsx and page.tsx files, please create layout.jsx and page.jsx files in the app folder.

Next, open the layout.tsx file and add the following code:

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

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

TypeScript
JavaScript
app/page.tsx
  export default function Page() {
  return <h1>Next.js Tutorial Series!</h1>;
}
app/page.jsx
  export default function Page() {
  return <h1>Next.js Tutorial Series!</h1>;
}
Additional information: If you forget to create a layout.tsx file in Next.js, don't worry! The development server will automatically generate it for you when run next dev command. This saves time and effort in creating this essential component for defining a consistent layout for your web pages.

Create the public folder

If desired, you can create a public folder to hold static assets such as images, fonts, and other files. These files can then be referenced in your code using the base URL (/).

Step 2 - Run Next.js Server

Here are the steps to run your application:

  1. Start the development server by running npm run dev in the command line.
  2. Navigate to http://localhost:3000 in your web browser to view your application.
  3. To see changes in your browser, edit either the app/layout.tsx or app/page.tsx file and save it.

Step 3 - The output

When accessing http://localhost:3000 using a web browser, the result will be displayed as shown below.

For automatic installation:

The automatic installation home page screen

For manual installation:

The manual installation home page screen

Previous Page
Next Page