章節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 檔案中看到列出的專案 dependencies。

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

刪除上述程式碼後，請將以下 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