Next.js入門：Hello World

Next.js是一個 React 框架，允許開發人員構建伺服器端渲染 (SSR) 或靜態生成的 Web 應用程式。它提供了簡化的開發體驗，具有自動程式碼分割、路由預取和簡化部署等功能。讓我們深入研究在 Next.js 中建立一個 Hello World 應用程式。

什麼是Next.js ？
Next.js 是一個 React 框架，用於構建基於 React 的伺服器渲染 (SSR) 和靜態網站。它提供了一種簡單而強大的方式來構建 React 應用程式，使開發者能夠輕鬆地處理伺服器渲染、靜態生成、路由和資料獲取等方面的複雜性。

Next.js 具有以下主要特性：

伺服器渲染 (SSR)：Next.js 支援伺服器渲染，可以在伺服器上動態生成頁面，以提供更好的效能和 SEO。
靜態生成：除了 SSR 外，Next.js 還支援靜態生成，可以在構建時生成靜態 HTML 檔案，這樣可以提高頁面載入速度，並允許您在不需要動態內容的情況下部署到靜態主機。
路由系統：Next.js 提供了簡單而強大的路由系統，支援動態路由、巢狀路由和自定義路由。
資料獲取：Next.js 提供了獲取資料的方法，包括在頁面載入時獲取資料（getInitialProps 或 getServerSideProps）以及在構建時獲取資料（getStaticProps）。
自動程式碼拆分：Next.js 會自動將程式碼拆分為更小的塊，以提高頁面載入效能。
CSS 模組化支援：Next.js 內建了對 CSS 模組化的支援，可以輕鬆地將 CSS 樣式應用於特定的元件。
TypeScript 支援：Next.js 對 TypeScript 有很好的支援，可以輕鬆地將 TypeScript 整合到專案中。

使用 Next.js 的優點
Next.js 為 Web 開發提供了幾個優勢：

改進的效能：Next.js 透過伺服器端渲染、自動程式碼分割和靜態站點生成來最佳化效能。
增強的 SEO：伺服器端渲染和靜態站點生成透過確保搜尋引擎可以有效地抓取和索引內容來改善 SEO。
簡化開發：Next.js 透過零配置、熱模組替換和內建路由等功能簡化了開發。
可擴充套件性：Next.js 具有高度可擴充套件性，可用於構建小型專案以及大型應用程式。
靈活性：Next.js 提供了根據專案需求在伺服器端渲染、靜態站點生成或兩者組合之間進行選擇的靈活性。
全棧功能：透過支援 API 路由，Next.js 使開發人員能夠使用單個框架構建全棧應用程式。

Next.js 常見用例
Next.js 適用於各種用例，包括：

搭建電子商務平臺
開發部落格和內容管理系統 (CMS)
建立營銷網站和登陸頁面
使用伺服器端渲染構建實時應用程式
開發漸進式 Web 應用程式 (PWA)
構建儀表板和分析應用程式
建立 API 和微服務

程式碼示例
建立一個“Hello World！” Next.js 中的應用程式非常簡單。 Next.js 是一個 React 框架，支援伺服器端渲染並簡化 React 應用程式的建立。這是建立“Hello, World!”的簡單分步指南。 Next.js 中的應用程式：

.1 設定Node Js
確保您的系統上安裝了Node.js和 npm（NodeJS包管理器）。使用 Next.js 時，建議使用大於 18 的 Node.js 版本。

2 建立一個新的Next.js應用程式
您可以選擇使用create-next-app命令（Next.js 團隊提供的工具）啟動新的 Next.js 應用程式。

npx create-next-app hello-world-with-nextjs

執行此命令將生成一個名為的新目錄hello-world-with-nextjs，並在其中初始化一個新的 Next.js 專案。該命令將提示輸入（例如 TypeScript 或 JavaScript 應用程式以及使用預設 CSS 或 SCSS），允許您根據自己的要求做出決定。

3 進入專案目錄
導航到專案目錄並修改typescript 檔案src/app/page.tsx。預設情況下，Next.js 建立一個簡單的主頁。開啟此檔案並將其內容替換為以下內容：

// 該元件代表主頁
export default function Home() {
  return (
    //主頁內容的主要容器
    <main style={{ textAlign: "center", padding: "20px" }}>
      {/* 問候語容器 */<font><i>}
      <div>
        {/* 帶問候語的標題 */<i>}
        <h1>Welcome to My Website</h1>
        <h3>
          {/* 帶連結的問候資訊 */<i>}
          Hello world from {/* Link to jdon website */<i>}
          <a
            href="https://www.jdon.com"
            target="_blank"
            style={{ textDecoration: "none", color: "blue" }}
          >
            jdon.com
          </a>
        </h3>
      </div>
      {/* 附加內容部分 */<i>}
      <section style={{ marginTop: "30px" }}>
        {/* 補充內容小標題 */<i>}
        <h2>Explore More:</h2>
        {/* List of features */<i>}
        <ul style={{ listStyleType: "none", padding: "0", margin: "0" }}>
          <li style={{ marginBottom: "10px" }}>Learn about JavaScript</li>
          <li style={{ marginBottom: "10px" }}>Discover React.js</li>
          <li style={{ marginBottom: "10px" }}>Master Web Development</li>
        </ul>
      </section>
    </main>
  );
}

Next.js 設定預設 CSS。
您可以透過註釋 CSS src/app/globals.css檔案中的程式碼來禁用預設。

執行開發伺服器
npm run dev
此命令將啟動開發伺服器，您將能夠看到您的 Next.js 應用程式在http://localhost:3000.如果該埠已被使用，Next.js 將自動切換到其他埠。如果您需要指定自定義埠，請更新檔案scripts中的標記package.json，如下所示。

<font>"scripts": {
    "dev": "next dev -p 9200",
    "build": "next build",
    "start": "next start -p 9200",
    "lint": "next lint"
  }

開發人員伺服器啟動後，您可以在瀏覽器中看到反映的更改http://localhost:3000。

結論
總之，在 Next.js 中建立“Hello World”應用程式是構建具有伺服器端渲染功能的 React 應用程式的簡單而強大的介紹。只需幾個步驟，我們就設定了一個基本的 Next.js 專案，顯示了我們的問候訊息，並深入瞭解了 Next.js 開發環境。這個基礎示例是探索 Next.js 為 Web 開發提供的豐富功能和可能性的起點。

Next.js入門：Hello World

相關文章