Next.js 簡介：建立您的第一個應用程式-js教程-PHP中文網

Next.js 是一種流行的 React 框架，使開發人員能夠創建快速的伺服器渲染應用程式。它提供了強大的開箱即用功能，例如靜態網站產生 (SSG)、伺服器端渲染 (SSR) 和 API 路由。在本指南中，我們將逐步介紹建立您的第一個 Next.js 應用程式的過程，重點關注關鍵概念和實際範例。

1. 設定您的 Next.js 項目

要開始使用 Next.js，您需要在電腦上安裝 Node.js。設定 Node.js 後，您可以使用以下命令建立新的 Next.js 應用程式：

npx create-next-app my-next-app

登入後複製

此命令建立一個名為 my-next-app 的新目錄，其中包含啟動 Next.js 應用程式所需的所有檔案和相依性。

2. 瀏覽項目結構

建立專案後，導覽至專案目錄：

cd my-next-app

登入後複製

在 my-next-app 目錄中，您會發現類似以下的結構：

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

登入後複製

pages 目錄是您建立應用程式頁面的位置，而 public 用於靜態資源。

3. 建立您的首頁

Next.js 使用基於檔案的路由系統。要建立新頁面，只需在頁面目錄中新增新的 JavaScript 檔案即可。例如，建立一個名為 about.js 的檔案：

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of my first Next.js application!</p>
      <Link href="/">Go back home</Link>
    </div>
  );
}

登入後複製

在此範例中，我們建立了一個簡單的「關於」頁面，並使用「連結」元件導覽回主頁。

4. 修改首頁

開啟pages目錄下的index.js檔。該文件代表您的應用程式的主頁。您可以如下修改：

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <p>
        This is my first application built with Next.js.{' '}
        <Link href="/about">Learn more about me</Link>
      </p>
    </div>
  );
}

登入後複製

在這裡，我們添加了一些簡單的樣式和「關於」頁面的連結。

5. 在您的應用程式中新增樣式

Next.js 支援開箱即用的 CSS 模組。若要設定組件的樣式，您可以在 styles 目錄中建立 CSS 模組。例如，建立一個名為 Home.module.css 的檔案：

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

登入後複製

接下來，將此 CSS 模組匯入到您的 index.js 頁面中，如上一節所示。

6. 使用 Next.js 取得數據

Next.js 可以輕鬆地使用 getStaticProps 進行靜態網站產生或使用 getServerSideProps 進行伺服器端渲染來取得資料。例如，要取得主頁上的數據，可以這樣修改index.js：

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

登入後複製

在此程式碼中，我們從公開 API 取得貼文清單並將其顯示在主頁上。

7. 建立API路由

Next.js 讓您在pages/api 目錄中建立API 路由。這些路由可用於建立您的後端功能。例如，在pages/api目錄下建立一個名為hello.js的檔案：

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}

登入後複製

您可以透過導覽至 http://localhost:3000/api/hello 來存取此 API 路由。

8. 部署您的 Next.js 應用程式

應用程式準備就緒後，您就可以輕鬆部署它。 Vercel 是推薦的 Next.js 應用程式託管平台。您可以按照以下步驟部署您的應用程式：

如果您沒有 Vercel 帳戶，請建立一個。
全域安裝 Vercel CLI：
```
npx create-next-app my-next-app
```
登入後複製
登入後複製
在專案目錄中執行以下命令：
```
cd my-next-app
```
登入後複製
登入後複製
按照提示部署您的應用程式。

9. 新增動態路由

Next.js 支援使用括號的動態路由。例如，如果你想要建立一個動態部落格文章頁面，你可以在pages/posts目錄下建立一個名為[id].js的檔案：

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

登入後複製

您現在可以透過導航到 /posts/1、/posts/2 等來存取特定貼文。

10. 實施全域樣式

如果您想將全域樣式應用到您的應用程序，可以透過在頁面目錄中建立一個名為 _app.js 的檔案來實現：

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of my first Next.js application!</p>
      <Link href="/">Go back home</Link>
    </div>
  );
}

登入後複製

接下來，在 styles 目錄中建立一個 globals.css 檔案並新增全域樣式：

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <p>
        This is my first application built with Next.js.{' '}
        <Link href="/about">Learn more about me</Link>
      </p>
    </div>
  );
}

登入後複製

11.使用環境變數

Next.js 支援環境變數來儲存敏感資訊。您可以在專案的根目錄中建立一個 .env.local 檔案並新增變數：

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

登入後複製

然後您可以使用 process.env 在應用程式中存取此變數：

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

登入後複製

恭喜建立您的第一個 Next.js 應用程式！在整個旅程中，您學習如何設定專案、建立動態頁面、無縫取得資料、實現強大的路由以及輕鬆部署應用程式。

Next.js 不只是一個框架；它是一個框架。它是一個強大的工具，可以顯著增強您的 Web 開發體驗。其內建功能，如靜態網站生成 (SSG) 和伺服器端渲染 (SSR)，使您能夠創建快速、用戶友好的應用程序，並針對效能和 SEO 進行了最佳化。