Next.js - Thiết lập môi trường

Vì Next.js là một khung công tác dựa trên phản ứng, chúng tôi đang sử dụng môi trường Node. Bây giờ hãy chắc chắn rằng bạn cóNode.js và npmđược cài đặt trên hệ thống của bạn. Bạn có thể sử dụng lệnh sau để cài đặt Next.js -

npm install next react react-dom

Bạn có thể quan sát kết quả sau khi Next.js được cài đặt thành công:

+ [email protected]
+ [email protected]
+ [email protected]
added 831 packages from 323 contributors and audited 834 packages in 172.989s

Bây giờ, hãy tạo một gói nút .json -

npm init

Chọn các giá trị mặc định trong khi tạo package.json -

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (nextjs)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to \Node\nextjs\package.json:
{
   "name": "nextjs",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
      "next": "^9.4.4",
      "react": "^16.13.1",
      "react-dom": "^16.13.1"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
}
Is this OK? (yes)

Bây giờ hãy cập nhật phần script của package.json để bao gồm các lệnh Next.js.

{
   "name": "nextjs",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
      "next": "^9.4.4",
      "react": "^16.13.1",
      "react-dom": "^16.13.1"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "next",
      "build": "next build",
      "start": "next start"
   },
   "author": "",
   "license": "ISC"
}

Tạo thư mục các trang.

Tạo một thư mục trang trong thư mục nextjs và tạo tệp index.js với nội dung sau.

function HomePage() {
   return <div>Welcome to Next.js!</div>
}

export default HomePage

Khởi động Máy chủ Next.js

Chạy lệnh sau để khởi động máy chủ -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Xác minh đầu ra

Mở localhost: 3000 trong trình duyệt và bạn sẽ thấy kết quả sau.