Tiếp theo js kết xuất tệp HTML

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('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 đầ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. 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 (
    <div className={styles.container}>
      <Head>
        <title>Hometitle>
        <meta name="description" content="My own personal static html page" />
        <link rel="icon" href="/favicon.ico" />
      Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to index.tsx!
        h1>
        <p>This is a static HTML website built with React & Next.js p>
        <div className={styles.grid}>

          <Link href="/people/me">
            <a className={styles.card}>
              <h2>About meh2>
              <p>Click here to navigate to people/me.p>
            a>
          Link>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h2>Learn →h2>
            <p>Learn more about Next.js!p>
          a>

        div>
      main>
    div>
  )
}

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

import 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 (
        <div className={styles.container}>
            <Head>
                <title>People - Metitle>
                <meta name="description" content="Page about me" />
                <link rel="icon" href="/favicon.ico" />
            Head>

            <main className={styles.main}>
                <h1>
                    Hello, my name is Fridtjof! 👋🏼
                h1>
                <p>
                    Nice to meet you!
                p>
                <Link href="/" >
                    <a className={styles.card}> 
                        Navigate to the frontpage
                    a>
                Link>
            main>
        div>
    )
}

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

Đả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 (
    <div className={styles.container}>
      <Head>
        <title>Hometitle>
        <meta name="description" content="My own personal static html page" />
        <link rel="icon" href="/favicon.ico" />
      Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to index.tsx!
        h1>
        <p>This is a static HTML website built with React & Next.js p>
        <div className={styles.grid}>

          <Link href="/people/me">
            <a className={styles.card}>
              <h2>About meh2>
              <p>Click here to navigate to people/me.p>
            a>
          Link>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h2>Learn →h2>
            <p>Learn more about Next.js!p>
          a>

        div>
      main>
    div>
  )
}

export default Home

Khi 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 (
    <div className={styles.container}>
      <Head>
        <title>Hometitle>
        <meta name="description" content="My own personal static html page" />
        <link rel="icon" href="/favicon.ico" />
      Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to index.tsx!
        h1>
        <p>This is a static HTML website built with React & Next.js p>
        <div className={styles.grid}>

          <Link href="/people/me">
            <a className={styles.card}>
              <h2>About meh2>
              <p>Click here to navigate to people/me.p>
            a>
          Link>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h2>Learn →h2>
            <p>Learn more about Next.js!p>
          a>

        div>
      main>
    div>
  )
}

export default Home

Xin 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

Tiếp theo ở đâu. tập tin HTML js?

Chúng tôi có thể hiển thị tệp HTML trong nút JS không?

Tiếp theo là gì. js không tốt cho?

là tiếp theo. js tốt cho các trang web tĩnh?