React 基礎：安裝 Next.js | Next.js

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

注意：使用 Next.js 需要你的機器安裝 Node.js 版本 18.17.0 或更高（查看最低版本需求），你可以在此下載。

為此，請在與 index.html 相同的目錄中建立一個新檔案，名為 package.json，內容為空物件 {}。

package.json

{}

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

Terminal

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

刪除上述行後，在檔案頂部添加以下導入：

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。這將是你應用程式的主頁。
為 <HomePage> 組件添加 export default，以幫助 Next.js 區分哪個組件應作為頁面的主組件渲染。

app/page.js

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

執行開發伺服器

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

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 錯誤訊息：你正在導入一個需要 useState 的組件。它只能在客戶端組件中工作...

這是因為 Next.js 使用了 React 伺服器組件 (Server Components)，這是一個新功能，允許 React 在伺服器上渲染。伺服器組件不支持 useState，因此你需要改用客戶端組件 (Client Component)。

在下一章中，我們將討論伺服器組件和客戶端組件的主要區別，並修復這個錯誤。

一個名為 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

建立你的第一個頁面

執行開發伺服器

總結

On this page