Js tiếp theo có sử dụng html không?

Question

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

Nội dung chính Show

Hãy tạo Tiếp theo đầu tiên của chúng ta. ứng dụng js
cấu trúc dự án
Thư mục trang
mục lục. tsx
Mọi người/tôi
Tạo HTML tĩnh
NextJS có sử dụng HTML không?
Làm cách nào để viết HTML trong NextJS?
Tệp HTML NextJS ở đâu?
Nhược điểm của NextJS là gì?

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

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

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

0. Hãy thay đổi bất cứ điều gì, ví dụ như 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 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

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

1

Đả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

0

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

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ào

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

NextJS có sử dụng HTML không?

lần xuất tiếp theo sẽ tạo phiên bản HTML cho ứng dụng của bạn . Trong quá trình xây dựng tiếp theo, getStaticProps và getStaticPaths sẽ tạo tệp HTML cho mỗi trang trong thư mục trang của bạn (hoặc nhiều hơn cho các tuyến động).

Làm cách nào để viết HTML trong NextJS?

Để làm được điều đó, tôi đã làm như sau. .

Creating an HTML file. Firstly, create an HTML file say myfile.html with your desired content .. .

Tạo API. Tạo một thư mục mới api bên trong thư mục trang của bạn và tạo myfile. js bên trong nó với nội dung sau. nhập fs từ "fs";.

cập nhật tiếp theo. cấu hình. .

Bước cuối cùng

Tệp HTML NextJS ở đâu?

tệp html trong cấu trúc thư mục sau khi tạo npx create-next-app . Về cơ bản, vì các tệp HTML cần thiết được tạo bởi Next. quy trình xây dựng js. Khi xây dựng ứng dụng ( bản dựng tiếp theo ), Tiếp theo.

Nhược điểm của NextJS là gì?

Nhược điểm kỹ thuật . js không linh hoạt lắm khi định tuyến . Cách tiếp cận mặc định là dựa trên trang, trong đó bạn chỉ định có tạo các trang đó phía máy chủ, phía máy khách hay tĩnh không.

programming html

Js tiếp theo có sử dụng html không?

Hãy tạo Tiếp theo đầu tiên của chúng ta. ứng dụng js

cấu trúc dự án

Thư mục trang

mục lục. tsx

Mọi người/tôi

Tạo HTML tĩnh

NextJS có sử dụng HTML không?

Làm cách nào để viết HTML trong NextJS?

Tệp HTML NextJS ở đâu?

Nhược điểm của NextJS là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội