Next.js - Hướng dẫn nhanh

Next.js là khung dựa trên React với khả năng kết xuất phía máy chủ. Nó rất nhanh và thân thiện với SEO.

Sử dụng Next.js, bạn có thể tạo ứng dụng dựa trên phản ứng mạnh mẽ khá dễ dàng và kiểm tra chúng. Sau đây là các tính năng chính của Next.js.

• Hot Code Reload - Máy chủ Next.js phát hiện các tệp đã sửa đổi và tải lại chúng tự động.

• Automatic Routing- Không cần cấu hình bất kỳ url nào để định tuyến. tập tin sẽ được đặt trong thư mục trang. Tất cả các url sẽ được ánh xạ tới hệ thống tệp. Tùy chỉnh có thể được thực hiện.

• Component specific styles - styled-jsx cung cấp hỗ trợ cho các kiểu cụ thể cũng như toàn cầu.

• Server side rendering - các thành phần phản ứng được hiển thị trước trên máy chủ do đó tải nhanh hơn trên máy khách.

• Node Ecosystem - Next.js là gel dựa trên phản ứng tốt với hệ sinh thái Node.

• Automatic code split- Next.js hiển thị các trang có thư viện mà họ cần. Next.js thay vì tạo một tệp javascript lớn, hãy tạo nhiều tài nguyên. Khi một trang được tải, chỉ trang javascript bắt buộc mới được tải với nó.

• Prefetch - Next.js cung cấp thành phần Liên kết được sử dụng để liên kết nhiều thành phần hỗ trợ thuộc tính tìm nạp trước để tìm nạp trước tài nguyên trang trong nền.

• Dynamic Components - Next.js cho phép nhập động các mô-đun JavaScript và các Thành phần React.

• Export Static Site - Next.js cho phép xuất toàn bộ trang web tĩnh từ ứng dụng web của bạn.

• Built-in Typescript Support - Next.js được viết bằng Typecripts và cung cấp hỗ trợ Typecript tuyệt vời.

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.

Trong Next.js, chúng ta có thể tạo các trang và điều hướng giữa chúng bằng cách sử dụng tính năng định tuyến hệ thống tệp. Chúng tôi sẽ sử dụngLink để có điều hướng phía máy khách giữa các trang.

Trong Next.js, một trang là một Thành phần React và được xuất từ ​​thư mục trang. Mỗi trang được liên kết với một tuyến dựa trên tên tệp của nó. Ví dụ

• pages/index.js được liên kết với tuyến đường '/'.

• pages/posts/first.js được liên kết với tuyến đường '/ posts / first', v.v.

Hãy cập nhật dự án nextjs được tạo trong chương Thiết lập môi trường .

Tạo thư mục bài viết và first.js bên trong nó với các nội dung sau.

export default function FirstPost() {
   return <h1>My First Post</h1>
}

Thêm Hỗ trợ Liên kết để quay lại Trang chủ. Cập nhật first.js như sau:

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
      </>	  
   )
}

Thêm Hỗ trợ Liên kết vào trang chủ để điều hướng đến trang đầu tiên. Cập nhật index.js như sau:

import Link from 'next/link'

function HomePage() {
   return (
      <>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
      </>	    
   )
}

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.

Nhấp vào Liên kết đầu tiên và bạn sẽ thấy kết quả sau.

Trong Next.js, chúng tôi có thể phục vụ các trang tĩnh như hình ảnh rất dễ dàng bằng cách đưa chúng vào public, một thư mục cấp cao nhất. Chúng ta có thể tham khảo các tệp này theo cách tương tự như các trang trongpages danh mục.

Trong Next.js, một trang là một Thành phần React và được xuất từ ​​thư mục trang. Mỗi trang được liên kết với một tuyến dựa trên tên tệp của nó.

Hãy cập nhật dự án nextjs được sử dụng trong chương Pages .

Tạo thư mục công khai và đặt bất kỳ hình ảnh nào trong đó. Chúng tôi đã lấy logo.png, hình ảnh Biểu trưng TutorialsPoint.

Cập nhật first.js như sau:

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
         <br/">
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	  
   )
}

Ở đây, chúng tôi đã thêm một tham chiếu đến logo.png trong tệp index.js.

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.

thư mục công cộng cũng hữu ích trong trường hợp mục đích SEO. Nó có thể được sử dụng cho robot.txt, xác minh Trang web của Google hoặc bất kỳ nội dung tĩnh nào khác trong ứng dụng web.

Trong Next.js, chúng tôi có thể phục vụ việc sửa đổi phần đầu của mỗi trang phản ứng rất dễ dàng với sự trợ giúp của <Head> thành phần phản ứng có sẵn.

Hãy cập nhật dự án nextjs được sử dụng trong chương Pages .

Cập nhật index.js như sau:

import Link from 'next/link'
import Head from 'next/head'

function HomePage() {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
         <br/>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export default HomePage

Cập nhật first.js như sau:

import Link from 'next/link'
import Head from 'next/head'

export default function FirstPost() {
   return (
      <>
      <Head>
         <title>My First Post</title>
      </Head>
      <h1>My First Post</h1>
      <h2>
         <Link href="/">
            <a>Home</a>
         </Link>
      </h2>
      </>	  
   )
}

Ở đây, chúng tôi đã thêm một tham chiếu đến logo.png trong tệp index.js.

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.

Nhấp vào liên kết Trang Đầu tiên và xác minh tiêu đề cũng được thay đổi trong trang Bài đăng Đầu tiên.

Trong Next.js, chúng ta có thể sử dụng thư viện css-in-js inbuild có tên là styled-jsx. Nó cho phép viết css trong một thành phần phản ứng và các kiểu này sẽ được xác định phạm vi thành phần.

Trong ví dụ này, chúng ta sẽ tạo một đối tượng Container sẽ được sử dụng để tạo kiểu cho các thành phần khác bằng cách chứa chúng.

Hãy cập nhật dự án nextjs được sử dụng trong chương Meta Data .

Đầu tiên hãy tạo một thư mục Thành phần ở cấp cơ sở và thêm một tệp chứa .module.css như sau:

.container {
   max-width: 36rem;
   padding: 0 1rem;
   margin: 3rem auto 6rem;
   border: 1px solid red;  
}

Tạo tệp containerner.js trong thư mục Thành phần

import styles from './container.module.css'

function Container({ children }) {
   return <div className={styles.container}>{children}</div>
}

export default Container

Bây giờ sử dụng thành phần Container trong first.js.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost() {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
            </h2>
         </Container>
      </>	  
   )
}

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à chuyển đến bài viết đầu tiên, bạn sẽ thấy kết quả sau.

Trong Next.js, Hãy tạo kiểu toàn cục sẽ được áp dụng trên tất cả các trang.

Trong ví dụ này, chúng tôi sẽ tạo một styles.css sẽ được sử dụng trên tất cả các thành phần sử dụng thành phần _app.js.

Hãy cập nhật dự án nextjs được sử dụng trong chương Hỗ trợ CSS .

Đầu tiên tạo một thư mục kiểu ở cấp cơ sở và thêm tệp styles.css như sau:

html,
body {
   padding: 0;
   margin: 0;
   line-height: 1.6;
   font-size: 18px;
   background-color: lime;
}

* {
   box-sizing: border-box;
}

a {
   color: #0070f3;
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

img {
   max-width: 100%;
   display: block;
}

Tạo tệp _app.js trong thư mục trang

import '../styles/styles.css'

export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />
}

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.

Nhấp vào liên kết bài đăng đầu tiên.

Trong Next.js, chúng ta biết rằng nó tạo HTML cho một trang được gọi là kết xuất trước. Next.JS hỗ trợ hai kiểu kết xuất trước.

• Static Generation- Phương pháp này tạo trang HTML tại thời điểm xây dựng. HTML kết xuất trước này được gửi theo từng yêu cầu. Phương pháp này hữu ích cho các trang web tiếp thị, blog, các sản phẩm thương mại điện tử liệt kê các trang web, trợ giúp, trang web tài liệu.

• Server Side Generation- Phương pháp này tạo trang HTML theo từng yêu cầu. Phương pháp này phù hợp khi nội dung trang html có thể thay đổi theo từng yêu cầu.

Kết xuất trước trên mỗi trang

Next.JS cho phép thiết lập phương pháp kết xuất trước cho mỗi trang trong đó hầu hết các trang tuân theo tạo tĩnh và các trang khác sẽ sử dụng kết xuất phía máy chủ.

Tạo tĩnh không có dữ liệu

Việc tạo tĩnh có thể được thực hiện mà không cần dữ liệu, trong trường hợp này, các trang HTML sẽ sẵn sàng mà không cần tìm nạp trước dữ liệu và sau đó bắt đầu hiển thị. Dữ liệu có thể được tìm nạp sau hoặc theo yêu cầu. Kỹ thuật này giúp hiển thị cho người dùng Giao diện người dùng mà không có bất kỳ dữ liệu nào trong trường hợp cần thời gian để có dữ liệu.

Tạo tĩnh với dữ liệu

Việc tạo tĩnh có thể được thực hiện với dữ liệu, trong trường hợp này, các trang HTML sẽ không sẵn sàng cho đến khi dữ liệu được tìm nạp, vì HTML có thể phụ thuộc vào dữ liệu. Mỗi thành phần có một phương pháp đặc biệtgetStaticProps có thể được sử dụng để tìm nạp dữ liệu và chuyển dữ liệu làm đạo cụ của trang để trang đó có thể hiển thị theo các đạo cụ đã chuyển.

Hàm getStaticProps () chạy tại thời điểm xây dựng trong sản xuất và chạy cho mọi yêu cầu trong chế độ nhà phát triển.

Hãy tạo một ví dụ để chứng minh điều tương tự.

Trong ví dụ này, chúng tôi sẽ tạo một trang update index.js và first.js để thực hiện một lần truy cập máy chủ để lấy dữ liệu.

Hãy cập nhật dự án nextjs được sử dụng trong chương Hỗ trợ CSS toàn cầu .

Cập nhật tệp index.js trong thư mục trang để sử dụng phương thức getServerSideProps (). Phương thức này sẽ được gọi theo yêu cầu.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Cập nhật tệp first.js trong thư mục trang để sử dụng phương thức getStaticProps (). Phương thức này sẽ được gọi một lần.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
               <Link href="/">
                  <a>Home</a>
               </Link>
               <div>Next stars: {props.stars}</div>
            </h2>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

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.

Nhấp vào liên kết bài đăng đầu tiên.

Next.js sử dụng bộ định tuyến dựa trên hệ thống tệp. Bất cứ khi nào chúng tôi thêm bất kỳ trang nào vàopagesthư mục, nó tự động có sẵn thông qua url. Sau đây là các quy tắc của bộ định tuyến này.

• Index Routes- Tệp index.js có trong thư mục ánh xạ tới thư mục gốc. Ví dụ -

  • pages / index.js ánh xạ tới '/'.

  • các trang / bài viết / index.js ánh xạ tới '/ bài viết'.

• Nested Routes- Bất kỳ cấu trúc thư mục lồng nhau nào trong thư mục trang do bộ định tuyến url tự động. Ví dụ -

  • các trang / cài đặt / bảng điều khiển / about.js ánh xạ tới '/ cài đặt / bảng điều khiển / giới thiệu'.

  • các trang / bài viết / first.js ánh xạ tới '/ bài viết / đầu tiên'.

• Dynamic Routes- Chúng tôi cũng có thể sử dụng tham số được đặt tên để khớp với url. Sử dụng dấu ngoặc cho giống nhau. Ví dụ -

  • pages / posts / [id] .js ánh xạ tới '/ posts /: id', nơi chúng tôi có thể sử dụng URL như '/ posts / 1'.

  • pages / [user] /settings.js ánh xạ tới '/ posts /: user / settings' nơi chúng tôi có thể sử dụng URL như '/ abc / settings'.

  • pages / posts / [... all] .js ánh xạ tới '/ posts / *', nơi chúng tôi có thể sử dụng bất kỳ URL nào như '/ posts / 2020 / jun /'.

Liên kết trang

Next.JS cho phép liên kết các trang ở phía máy khách bằng thành phần Phản ứng liên kết. Nó có các thuộc tính sau:

• href- tên của trang trong thư mục trang. Ví dụ/posts/first trong đó đề cập đến first.js có trong thư mục trang / bài viết.

Hãy tạo một ví dụ để chứng minh điều tương tự.

Trong ví dụ này, chúng tôi sẽ cập nhật trang index.js và first.js để thực hiện một lần truy cập máy chủ để lấy dữ liệu.

Hãy cập nhật dự án nextjs được sử dụng trong chương Hỗ trợ CSS toàn cầu .

Cập nhật tệp index.js trong thư mục trang như sau.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first">> <a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

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.

Nhấp vào liên kết bài đăng đầu tiên.

Trong Next.js, chúng ta có thể tạo các tuyến đường một cách động. Trong ví dụ này, chúng tôi sẽ tạo các trang một cách nhanh chóng và định tuyến của chúng.

• Step 1. Define [id].js file- [id] .js đại diện cho trang động nơi id sẽ là đường dẫn tương đối. Xác định tệp này trong thư mục trang / bài đăng.

• Step 2. Define lib/posts.js- posts.js đại diện cho id và nội dung. thư mục lib sẽ được tạo trong thư mục gốc.

[id] .js

Cập nhật tệp [id] .js bằng phương thức getStaticPaths () đặt các đường dẫn và phương thức getStaticProps () để lấy nội dung dựa trên id.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

import { getAllPostIds, getPostData } from '../../lib/posts'

export default function Post({ postData }) {
   return (
      <Container>
         {postData.id}
         <br />
         {postData.title}
         <br />
         {postData.date}
      </Container>
   )
}
export async function getStaticPaths() {
   const paths = getAllPostIds()
   return {
      paths,
      fallback: false
   }
}

export async function getStaticProps({ params }) {
   const postData = getPostData(params.id)
      return {
      props: {
         postData
      }
   }
}

posts.js

posts.js chứa getAllPostIds () để lấy id và getPostData () để lấy nội dung tương ứng.

export function getPostData(id) {
   const postOne = {
      title: 'One',
      id: 1,
      date: '7/12/2020'
   }

   const postTwo = {
      title: 'Two',
      id: 2,
      date: '7/12/2020'
   }
   if(id == 'one'){
      return postOne;
   }else if(id == 'two'){
      return postTwo;
   }  
}

export function getAllPostIds() {
   return [{
      params: {
         id: 'one'
      }
   },
   {
      params: {
         id: 'two'
      }
   }
];
}

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 / posts / one trong trình duyệt và bạn sẽ thấy kết quả sau.

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

Trong Next.js, cho đến nay chúng tôi đang sử dụng thành phần Phản ứng liên kết để điều hướng từ trang này sang trang khác. Có một cách lập trình cũng như sử dụng thành phần Bộ định tuyến. Nói chung, thành phần Router được sử dụng với các thẻ html.

Cập nhật tệp index.js trong thư mục trang như sau.

import Router from 'next/router'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <span onClick={() => Router.push('/posts/one')}>First Post</span>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

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.

Nhấp vào Bài đăng đầu tiên không phải là một liên kết nhưng có thể nhấp được.

Trong Next.js, định tuyến cạn đề cập đến việc điều hướng đến cùng một trang nhưng không có lệnh gọi đến các phương thức getServerSideProps, getStaticProps và getInitialProps.

Để thực hiện định tuyến cạn, chúng tôi sử dụng Bộ định tuyến với cờ nông là đúng. Xem ví dụ dưới đây.

Cập nhật tệp index.js trong thư mục trang như sau.

import Router from 'next/router'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <span onClick={() => Router.push('/?counter=1', undefined, { shallow: true })}>Reload</span>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

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, sau đó nhấp vào liên kết Tải lại và bạn sẽ thấy kết quả sau.

API Routes là một cách để tạo API nghỉ bằng Next.js. Next.js ánh xạ bất kỳ tệp nào có trong/pages/apithư mục và sẽ được coi là điểm cuối API. Ví dụ về hàm API -

export default (req, res) => {
   ...
}

Sau đây là một số điểm quan trọng cần xem xét.

• req - req là một thể hiện của http.IncomingMessage và được sử dụng để lấy dữ liệu từ yêu cầu.

• res - res là một thể hiện của http.ServerResponse và được sử dụng để gửi dữ liệu dưới dạng phản hồi.

Hãy tạo một ví dụ để chứng minh điều tương tự.

Trong ví dụ này, chúng tôi sẽ tạo một user.js trong pages/api danh mục.

Hãy cập nhật dự án nextjs được sử dụng trong chương Hỗ trợ CSS toàn cầu .

Tạo tệp user.js trong thư mục pages / api như sau.

export default (req, res) => {
   res.statusCode = 200
   res.setHeader('Content-Type', 'application/json')
   res.end(JSON.stringify({ name: 'Robert' }))
}

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 D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
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 / api / user trong trình duyệt và bạn sẽ thấy kết quả sau.

{"name":"Robert"}

Các tuyến API trong Next.JS có phần mềm trung gian được tích hợp sẵn giúp phân tích cú pháp yêu cầu đến.

Sau đây là các phần mềm trung gian

• req.cookies- đối tượng cookie chứa các cookie được gửi theo yêu cầu. Giá trị mặc định là {}.

• req.query- đối tượng truy vấn chứa chuỗi truy vấn. Giá trị mặc định là {}.

• req.body- đối tượng truy vấn chứa nội dung yêu cầu được phân tích cú pháp bằng 'content-type'. Giá trị mặc định là null.

Hãy tạo một ví dụ để chứng minh điều tương tự.

Trong ví dụ này, chúng tôi sẽ cập nhật user.js trong pages/api danh mục.

Hãy cập nhật dự án nextjs được sử dụng trong chương Các tuyến API .

Tạo tệp user.js trong thư mục pages / api như sau.

export default (req, res) => {
   res.statusCode = 200
   res.setHeader('Content-Type', 'application/json')
   res.end(JSON.stringify({ query: req.query }))
}

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 D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Xác minh đầu ra

Mở http: // localhost: 3000 / api / user? Counter = 1 trong trình duyệt và bạn sẽ thấy kết quả sau.

{"query":{"counter":"1"}}

res đối tượng có express.js như các phương thức trợ giúp để dễ dàng phát triển để tạo dịch vụ.

Sau đây là các phương pháp của trình trợ giúp phản hồi

• res.status(code)- Phương pháp này thiết lập trạng thái phản hồi. Mã được chuyển phải là trạng thái HTTP hợp lệ.

• req.json(json)- Phương thức này trả về một phản hồi JSON. json được truyền phải là một đối tượng JSON hợp lệ.

• req.send(body)- Phương thức này gửi một phản hồi HTTP. Phản hồi có thể là chuỗi, đối tượng hoặc Bộ đệm.

Hãy tạo một ví dụ để chứng minh điều tương tự.

Trong ví dụ này, chúng tôi sẽ cập nhật user.js trong pages/api danh mục.

Hãy cập nhật dự án nextjs được sử dụng trong chương Các tuyến API .

Tạo tệp user.js trong thư mục pages / api như sau.

export default (req, res) => {
   res.status(200).json({ name: 'Robert' });
}

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 D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Xác minh đầu ra

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

{ name: 'Robert' }

Next.js, có hỗ trợ thực thi cho kiểu chữ. Sau đây là một số bước để bật bảng chữ trong dự án.

Tạo tsconfig.json

Tạo tsconfig.json trong thư mục gốc. Chúng tôi đang giữ nó trống ban đầu. Bây giờ khởi động máy chủ.

Next.JS sẽ phát hiện tsconfig.json và hiển thị thông báo follwing trên bảng điều khiển.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install typescript, @types/react, and @types/node by running:

        npm install --save-dev typescript @types/react @types/node

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files).
...

Cài đặt bản ghi

Chạy lệnh npm install để cài đặt bản ghi và các thư viện liên quan.

npm install --save-dev typescript @types/react @types/node
...

+ @types/[email protected]
+ @types/[email protected]
+ [email protected]
added 5 packages from 72 contributors and audited 839 packages in 27.538s
...

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 D:\Node\nextjs
> next

ready - started server on http://localhost:3000
We detected TypeScript in your project and created a tsconfig.json file for you.


Your tsconfig.json has been populated with default values.

event - compiled successfully
wait  - compiling...
event - compiled successfully

Mở tsconfig.json

Máy chủ NextJS đã sửa đổi tsconfig.json.

{
   "compilerOptions": {
      "target": "es5",
      "lib": [
         "dom",
         "dom.iterable",
         "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "strict": false,
      "forceConsistentCasingInFileNames": true,
      "noEmit": true,
      "esModuleInterop": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "jsx": "preserve"
   },
   "exclude": [
      "node_modules"
   ],
   "include": [
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx"
   ]
}

Tạo hello.ts

Tạo hello.ts trong thư mục pages / api sẽ hoạt động như một dịch vụ nghỉ ngơi cho chúng tôi.

import { NextApiRequest, NextApiResponse } from 'next'

export default (_: NextApiRequest, res: NextApiResponse) => {
   res.status(200).json({ text: 'Welcome to TutorialsPoint' })
}

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 / api / hello trong trình duyệt và bạn sẽ thấy kết quả sau.

{"text":"Welcome to TutorialsPoint"}

Next.js, có hỗ trợ xuất bản các biến môi trường trong nút mà chúng ta có thể sử dụng để kết nối với máy chủ, cơ sở dữ liệu, v.v. Đối với điều này, chúng ta cần tạo tệp .env.local trong thư mục gốc. Chúng tôi cũng có thể tạo .env.production.

Tạo .env.local

Tạo .env.local trong thư mục gốc với nội dung sau.

DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs

Tạo env.js

Tạo một trang có tên env.js với nội dung sau trong thư mục pages / posts, nơi chúng ta sẽ sử dụng các biến môi trường bằng process.env.

import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>Environment Variables</title>
            </Head>
            <h1>Database Credentials</h1>
               <p>Host: {props.host}</p>
               <p>Username: {props.username}</p>
               <p>Password: {props.password}</p>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   // Connect to Database using DB properties
   return {
      props: { 
         host: process.env.DB_HOST,
         username: process.env.DB_USER,
         password: process.env.DB_PASS
      }
   }
}

Bây giờ khởi động máy chủ.

Next.JS sẽ phát hiện .env.local và hiển thị thông báo follwing trên bảng điều khiển.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
wait  - compiling...
event - compiled successfully
event - build page: /posts/env
wait  - compiling...
event - compiled successfully

Xác minh đầu ra

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

Cho đến nay chúng tôi đã phát triển và chạy ứng dụng NEXT.JS mẫu ở chế độ nhà phát triển, bây giờ chúng tôi sẽ triển khai cục bộ sẵn sàng sản xuất bằng cách sử dụng các bước sau.

• npm run build - Xây dựng sản xuất sẵn sàng, xây dựng tối ưu hóa cao.

• npm run start - Khởi động máy chủ.

Bản dựng sẵn sàng sản xuất thiếu bản đồ nguồn và tải lại mã nóng so với chế độ nhà phát triển vì những tính năng đó chủ yếu được sử dụng để gỡ lỗi.

Chuẩn bị Xây dựng

Chạy lệnh sau để chuẩn bị xây dựng sẵn sàng sản xuất -.

npm run build

> [email protected] build \Node\nextjs
> next build

info  - Loaded env from \Node\nextjs\.env.local
Creating an optimized production build

Compiled successfully.

Automatically optimizing pages

Page                                                           Size     First Load JS
+ ? /                                                          2.25 kB        60.3 kB
+   /_app                                                      288 B          58.1 kB
+        /404                                                       3.25 kB   61.3 kB
+ ? /api/user
+ ? /posts/[id]                                                312 B          61.6 kB
+   + /posts/one
+   + /posts/two
+ ? /posts/env                                                 2.71 kB        60.8 kB
+ ? /posts/first                                               374 B          61.7 kB
+ First Load JS shared by all                                  58.1 kB
  + static/pages/_app.js                                       288 B
  + chunks/3458401054237127135bcd3ee8eb2a19d67af299.a1a019.js  10.5 kB
  + chunks/framework.c6faae.js                                 40 kB
  + runtime/main.60464f.js                                     6.54 kB
  + runtime/webpack.c21266.js                                  746 B
  + css/9706b5b8ed8e82c0fba0.css                               175 B

?  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
          (Static)  automatically rendered as static HTML (uses no initial props)
?  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

Khởi động máy chủ

Chạy lệnh sau để bắt đầu máy chủ sản xuất -.

npm run start

> [email protected] start \Node\nextjs
> next start

info  - Loaded env from \Node\nextjs\.env.local
ready - started server on http://localhost:3000

Xác minh đầu ra

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

{"name":"Robert"}

NEXT.JS cung cấp CLI để khởi động, xây dựng và xuất ứng dụng. Nó có thể được gọi bằng cách sử dụng npx có từ npm 5.2 trở đi.

CLI Trợ giúp

Để nhận danh sách các lệnh CLI và trợ giúp về chúng, hãy nhập lệnh sau.

npx next -h
   Usage
      $ next <command>

   Available commands
      build, start, export, dev, telemetry

   Options
      --version, -v   Version number
      --help, -h      Displays this message

   For more information run a command with the --help flag
      $ next build --help

Xây dựng Sản xuất Sẵn sàng Xây dựng

Nhập lệnh sau.

npx next build
info  - Loaded env from D:\Node\nextjs\.env.local
Creating an optimized production build

Compiled successfully.

Automatically optimizing pages

Page                                                           Size     First Load JS
+ ? /                                                          2.25 kB        60.3 kB
+   /_app                                                      288 B          58.1 kB
+        /404                                                       3.25 kB   61.3 kB
+ ? /api/user
+ ? /posts/[id]                                                312 B          61.6 kB
+   + /posts/one
+   + /posts/two
+ ? /posts/env                                                 2.71 kB        60.8 kB
+ ? /posts/first                                               374 B          61.7 kB
+ First Load JS shared by all                                  58.1 kB
  + static/pages/_app.js                                       288 B
  + chunks/ab55cb957ceed242a750c37a082143fb9d2f0cdf.a1a019.js  10.5 kB
  + chunks/framework.c6faae.js                                 40 kB
  + runtime/main.60464f.js                                     6.54 kB
  + runtime/webpack.c21266.js                                  746 B
  + css/9706b5b8ed8e82c0fba0.css                               175 B

?  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
          (Static)  automatically rendered as static HTML (uses no initial props)
?  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

Xây dựng và Bắt đầu Máy chủ Phát triển

Nhập lệnh sau.

npx next dev

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully

Khởi động Máy chủ sản xuất

Nhập lệnh sau.

npx next start

info  - Loaded env from \Node\nextjs\.env.local
ready - started server on http://localhost:3000