Trong Tiếp theo. js, chúng tôi biết nó tạo HTML cho một trang được gọi là kết xuất trước. Tiếp theo. JS hỗ trợ hai loại kết xuất trước
Tạo tĩnh - Phương thức này tạo trang HTML khi 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 rất hữu ích cho các trang web tiếp thị, blog, trang web liệt kê sản phẩm thương mại điện tử, trang web trợ giúp, tài liệu
Tạo phía máy chủ - Phương thức này tạo trang HTML trên mỗi 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 mỗi trang
Tiếp theo. JS cho phép đặt phương thức kết xuất trước cho từng trang trong đó hầu hết các trang theo thế hệ 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 đó, 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 lấy 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 dữ liệu cần có thời gian để đến
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 đó, 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 thức đặc biệt getStaticProps có thể được sử dụng để tìm nạp dữ liệu và truyền dữ liệu dưới dạng các đạo cụ của trang để trang có thể hiển thị theo các đạo cụ đã truyền
Hàm getStaticProps[] chạy tại thời điểm xây dựng trong quá trình 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 chỉ mục cập nhật. js và đầu tiên. js để tạo lượt 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 chỉ mục. js trong thư mục pages để 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 [ Welcome to Next.js!Welcome to Next.js!
First Post
Next stars: {props.stars}
] } export async function getServerSideProps[context] { const res = await fetch['//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 đầu tiên. js trong thư mục pages để sử dụng phương thức getStaticProps[]. Phương thức này sẽ được gọi một lần
Phản ứng là tuyệt vời. Với React, thật dễ dàng để tạo các thành phần có thể tái sử dụng. Nó dễ dàng tích hợp với TypeScript, nó có thể được sử dụng để phát triển di động - và nó có một cộng đồng lớn
Trong bài đăng này, chúng tôi sẽ tạo một trang web đơn giản bằng cách sử dụng khung React Tiếp theo. js và xuất trang web dưới dạng trang web HTML tĩnh sẵn sàng triển khai ở mọi nơi
👋🏼 Tiếp theo. jsTiếp theo. js là một khung trên React cho phép hiển thị phía máy chủ và tạo trang web tĩnh. Nó đi kèm với rất nhiều tính năng hữu ích, chẳng hạn như Tối ưu hóa hình ảnh và định tuyến thân thiện với SEO. Chúng tôi sẽ không đi sâu vào chi tiết về các chủ đề này, nhưng bạn có thể muốn xem phần Tiếp theo. js' nếu bạn thấy những chủ đề này thú vị
Hãy tạo Tiếp theo đầu tiên của chúng ta. ứng dụng js
Hãy bắt đầu ngay và khởi tạo dự án bằng cách sử dụng ứng dụng tạo tiếp theo. Mở thiết bị đầu cuối của bạn và tạo môi trường Tiếp theo bằng lệnh bên dưới
npx create-next-app@latest --typescript
Nhập tên dự án của bạn và xem điều kỳ diệu xảy ra. Để khởi động ứng dụng ở chế độ phát triển, hãy nhập thư mục dự án và chạy
cd my-app && npm run dev
Bây giờ bạn có thể truy cập http. //máy chủ cục bộ. 3000 để xem trang web
cấu trúc dự án
Mở thư mục thuộc dự án và xem các thư mục trong thư mục gốc của dự án. Nó sẽ trông giống như thế này
- /node_modules
- /pages
- /api
- index.js
- styles
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Thư mục trang
Thư mục trang tương đương với các tuyến trang web của bạn. http. //máy chủ cục bộ. 3000 chuyển hướng đến /pages/index. tsx. Để tạo một tuyến đường mới, hãy tạo một tệp mới trong thư mục trang. Ví dụ: một /pages/about. tệp tsx sẽ tạo tuyến đường http. //máy chủ cục bộ. 3000/khoảng
mục lục. tsx
Hãy đơn giản hóa trang đầu một chút. mở chỉ mục. tsx và thay thế nội dung tệp bằng mã bên dưới
import type { NextPage } from 'next'
import Head from 'next/head'
import Link from 'next/link'
import styles from '../styles/Home.module.css'
const Home: NextPage = [] => {
return [
Home
Welcome to index.tsx!
This is a static HTML website built with React & Next.js
About me
Click here to navigate to people/me.
Learn →
Learn more about Next.js!
]
}
export default Home
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Điều hướng đến http. //máy chủ cục bộ. 3000. Trang sẽ trông giống như thế này
Có một Link
đến people/me
. Thành phần Link
đảm nhiệm việc định tuyến trang trong trang web. Ngay bây giờ, liên kết chuyển hướng đến trang 404. Đó là vì trang mọi người/tôi bị thiếu trong ứng dụng. Hãy tiếp tục và tạo tập tin đó
Mọi người/tôi
Dán đoạn mã sau vào
- /node_modules
- /pages
- /api
- index.js
- styles
1. Hãy thay đổi bất cứ điều gì, ví dụ như tênimport type { NextPage } from 'next'
import Head from 'next/head';
import Link from 'next/link';
import styles from '../../styles/Home.module.css'
const Me: NextPage = [] => {
return [
People - Me
Hello, my name is Fridtjof! 👋🏼
Nice to meet you!
Navigate to the frontpage
]
}
export default Me
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
nhập http. //máy chủ cục bộ. 3000/người/tôi và xem kết xuất trang web của bạn. Sau khi hoàn thành kiệt tác dài hai trang này, giờ là lúc chia sẻ kiệt tác của bạn với mọi người. Đã đến lúc xây dựng
Tạo HTML tĩnh
Trước khi bạn có thể triển khai trang web của mình dưới dạng trang web tĩnh, trang web đó phải được xây dựng và xuất. Để làm như vậy, hãy thay đổi tập lệnh xây dựng trong gói. json để xuất dự án
- /node_modules
- /pages
- /api
- index.js
- styles
2Đảm bảo rằng bạn đã lưu các thay đổi mới nhất của mình, sau đó chạy
import type { NextPage } from 'next'
import Head from 'next/head'
import Link from 'next/link'
import styles from '../styles/Home.module.css'
const Home: NextPage = [] => {
return [
Home
Welcome to index.tsx!
This is a static HTML website built with React & Next.js
About me
Click here to navigate to people/me.
Learn →
Learn more about Next.js!
]
}
export default Home
0Khi hoàn thành tập lệnh, một thư mục mới có tên
import type { NextPage } from 'next'
import Head from 'next/head'
import Link from 'next/link'
import styles from '../styles/Home.module.css'
const Home: NextPage = [] => {
return [
Home
Welcome to index.tsx!
This is a static HTML website built with React & Next.js
About me
Click here to navigate to people/me.
Learn →
Learn more about Next.js!
]
}
export default Home
1 sẽ xuất hiện trong dự án. Để triển khai mã, hãy sao chép nội dung của thư mục ra vào bất kỳ khách sạn web hoặc bộ chứa nào, giống như bạn làm với bất kỳ trang web HTML tĩnh nàoXin chúc mừng. Bây giờ bạn đã có trang web tĩnh của riêng mình, được tạo bằng các thành phần React mà bạn có thể triển khai ở mọi nơi. Lưu ý rằng bài đăng này chỉ chạm vào bề mặt của Tiếp theo. js. Để sử dụng Tiếp theo. js cho một trang đơn giản như trang chúng tôi đã xây dựng là hoàn toàn quá mức cần thiết, nhưng đó là một lời giới thiệu hay. Trong một bài đăng trong tương lai, chúng tôi sẽ xem xét thêm những lợi ích của việc sử dụng Tiếp theo. js