章節9

安裝 Next.js

當你在專案中使用 Next.js 時，你不再需要從 unpkg.com 載入 react 和 react-dom 腳本。相反地，你可以使用 npm 或你偏好的套件管理器在本機安裝這些套件。

注意：要使用 Next.js，你的電腦上需要安裝 Node.js 版本 18.17.0 或以上版本（請參閱最低版本需求），你可以從這裡下載。

要這麼做，在與你的 index.html 檔案相同的目錄中建立一個新檔案，命名為 package.json，內容為空的物件 {}。

package.json

{}

在你的終端機中，在你的專案根目錄執行以下命令

終端機

npm install react@latest react-dom@latest next@latest

一旦安裝完成，你應該可以在你的 package.json 檔案內看到列出的專案依賴項

package.json

{
  "dependencies": {
    "next": "^14.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

如果你使用的版本比上面顯示的更新，請別擔心，只要你安裝了 next、react 和 react-dom 套件，就沒問題。

你也會注意到一個名為 package-lock.json 的新檔案，其中包含關於每個套件確切版本的詳細資訊。

回到 index.html 檔案，你可以刪除以下程式碼

<html> 和 <body> 標籤。
<div> 元素，其 id 為 app。
react 和 react-dom 腳本，因為你已經使用 NPM 安裝了它們。
Babel 腳本，因為 Next.js 有一個編譯器，可以將 JSX 轉換為有效的 JavaScript，讓瀏覽器可以理解。
<script type="text/jsx"> 標籤。
document.getElementById() 和 ReactDom.createRoot() 方法。
React. 在 React.useState(0) 函數中的部分

刪除上述行後，在你的檔案頂部新增以下 import

index.html

import { useState } from 'react';

你的程式碼應該看起來像這樣

index.html

import { useState } from 'react';
 
function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}
 
function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  const [likes, setLikes] = useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
 
      <button onClick={handleClick}>Like ({likes})</button>
    </div>
  );
}

HTML 檔案中只剩下 JSX 程式碼，因此你可以將檔案類型從 .html 變更為 .js 或 .jsx。

建立你的第一個頁面

Next.js 使用檔案系統路由。這表示你可以使用資料夾和檔案來定義應用程式的路由，而不是使用程式碼。

以下是如何在 Next.js 中建立你的第一個頁面

建立一個名為 app 的新資料夾，並將 index.js 檔案移到裡面。
將你的 index.js 檔案重新命名為 page.js。這將會是你應用程式的主要頁面。
將 export default 新增到你的 <HomePage> 元件，以協助 Next.js 區分哪個元件要作為頁面的主要元件渲染。

app/page.js

import { useState } from 'react';
 
function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}
 
export default function HomePage() {
  // ...
}

執行開發伺服器

接下來，讓我們執行你的開發伺服器，以便你在開發時查看新頁面的變更。將 "next dev" 腳本新增到你的 package.json 檔案

package.json

{
  "scripts": {
    "dev": "next dev"
  },
  "dependencies": {
    "next": "^14.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

透過在你的終端機中執行 npm run dev 來檢查會發生什麼事。你會注意到兩件事

當你導覽到 localhost:3000 時，你應該會看到以下錯誤

Next.js Error Message: You're importing a component that needs useState. It only works in a Client component...

這是因為 Next.js 使用 React 伺服器元件，這是一個允許 React 在伺服器上渲染的新功能。伺服器元件不支援 useState，因此你需要改用用戶端元件。

在下一個章節中，我們將討論伺服器元件和用戶端元件之間的主要差異，並修正這個錯誤。

一個名為 layout.js 的新檔案已自動在 app 資料夾內建立。這是你應用程式的主要版面配置。你可以使用它來新增在所有頁面之間共用的 UI 元素（例如導覽列、頁尾等）。

/app/layout.js

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
};
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

總結

看看目前的遷移進度，你可能已經開始感受到使用 Next.js 的好處

你移除了 React 和 Babel 腳本；初步體驗到你不再需要考慮複雜的工具和設定。
你建立了你的第一個頁面。

延伸閱讀

Next.js 路由基礎知識

定義路由

頁面和版面配置

安裝 Next.js

建立你的第一個頁面

執行開發伺服器

總結

你已完成章節9