YouTipHello, World!
;
}
Visit **http://localhost:3000**, and you will see:
Hello, World!
* * *
## Manual Next.js Installation
To manually create a new Next.js application, first install the required packages:
npm install next@latest react@latest react-dom@latest
Next, open your package.json file and add the following scripts:
## package.json file:
{
"scripts":{
"dev":"next dev",// Start Next.js in development mode
"build":"next build",// Build the application for production
"start":"next start",// Start the Next.js production server
"lint":"next lint"// Configure Next.js built-in ESLint
}
}
These scripts represent different stages of developing the application:
* **dev**: Run `next dev` to start Next.js in development mode.
* **build**: Run `next build` to build the application for production.
* **start**: Run `next start` to start the Next.js production server.
* **lint**: Run `next lint` to set up Next.js's built-in ESLint configuration.
### Create App Directory
Next.js uses file-system routing, which means the application's routes are determined by the file structure.
Create an app folder, then add a layout.tsx and a page.tsx file. These files will be rendered when the user visits the root path / of the application.
#### Create Root Layout File
Create the root layout file in `app/layout.tsx`, containing the required `` and `` tags:
## Example
export default function RootLayout({
children,
}:{
children: React.ReactNode
}){
return(
{children}Nextjs Install
Before starting, make sure you have installed Node.js and npm. You can check if they are installed by running the following commands:
node -v npm -v
If your system does not support Node.js and NPM yet, you can refer to our [Node.js Tutorial](#).
Using npm in China is very slow. You can use the Taobao-customized cnpm (gzip compression support) command-line tool instead of the default npm:
$ npm install -g cnpm --registry=https://registry.npmmirror.com $ npm config set registry https://registry.npmmirror.com
This way, you can use the cnpm command to install modules:
$ cnpm install
For more information, visit: [http://npm.taobao.org/](http://npm.taobao.org/).
* * *
## Quickly Build Next.js Development Environment Using create-react-app
Next.js provides an official scaffolding tool create-next-app for quickly setting up projects.
create-react-app comes from Facebook, which allows us to quickly build a Next.js development environment without any configuration.
The project created by create-react-app is based on Webpack + ES6.
Execute the following command to create the project:
npx create-next-app@latest my-next-app
During installation, you will see the following prompts, just press Enter all the way:
Would you like to use TypeScript? No / YesWould you like to use ESLint? No / YesWould you like to use Tailwind CSS? No / YesWould you like your code inside a `src/` directory? No / YesWould you like to use App Router? (recommended) No / YesWould you like to use Turbopack for `next dev`? No / YesWould you like to customize the import alias (`@/*` by default)? No / YesWhat import alias would you like configured? @/*
npx is a Node.js tool used to run binaries from packages without needing to install them globally.
* Use the `create-next-app` scaffolding tool to create a new Next.js project.
* `my-next-app` is the project name, you can change it to any name as needed.
* It will automatically install the dependencies required for the project.
After running this command, create-next-app will automatically do the following:
* Create a folder named my-next-app.
* Initialize the project and install necessary dependencies.
* Create the basic project structure, including app folder, public folder, package.json file, etc.
!(#)
After creation, enter the project directory:
cd my-next-app
In the project directory, run the following command to start the development server:
npm run dev
Or if you use yarn:
yarn dev
The development server runs on **http://localhost:3000** by default. Open your browser and visit **http://localhost:3000**. You should see the default Next.js welcome page.
!(#)
We can modify the page.tsx file in the app directory. The modified code is:
## app/page.tsx
export default function Home(){
return