Next.js
Installation
System Requirements
First, make sure your development environment meets the following requirements:
- Node.js 16.8 or later.
- MacOS, Windows (including WSL), and Linux are supported.
Note: While the
pagesdirectory requires Node.jsv14or later, theappdirectory requires Nodev16.8.0or later.
Automatic Installation
To automatically create a new Next.js project using the app directory:
npx create-next-app@latest --experimental-app
create-next-app now ships with TypeScript by default. See TypeScript for more information.
Manual Installation
To create a new Next.js app, install the required packages:
npm install next@latest react@latest react-dom@latest eslint-config-next@latest
Open package.json and add the following scripts:
{
"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: runsnext devto start Next.js in development mode.build: runsnext buildto build the application for production usage.start: runsnext startto start a Next.js production server.lint: runsnext lintto set up Next.js' built-in ESLint configuration.
Next, opt into the beta app directory. Create a next.config.js file in the root directory of your project and add the following code:
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true,
},
};
module.exports = nextConfig;
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:
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
Finally, create a home page app/page.tsx with some initial content:
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}
Good to know: If you forget to create
layout.tsx, Next.js will automatically create this file for you when running the development server withnext dev.
Running the Development Server
- Run
npm run devto start the development server. - Visit
http://localhost:3000to view your application. - Edit
app/layout.tsxorapp/page.tsxand save to see the updated result in your browser.