入門：如何使用 Next.js API 構建端點

要開始使用 Next.js API，只需按照以下簡單步驟操作：

1. 創建 Next.js 項目

如果尚未創建項目，可以使用以下命令快速生成一個新的 Next.js 項目：

npx create-next-app

2. 導航到 API 目錄

在項目中，進入 pages/api 目錄，這是定義 API 路由的地方。

3. 創建第一個動態 API 路由

在 pages/api 目錄中創建一個新的 JavaScript 文件，例如 hello.js，并添加以下代碼：

// pages/api/hello.js
export default (req, res) => {
  res.status(200).json({ message: '你好，Next.js API！' });
};

4. 運行 Next.js 應用程序

啟動開發服務器：

npm run dev

然后訪問 http://localhost:3000/api/hello，即可看到 API 的返回結果。

通過這些簡單的步驟，您已經成功創建了一個基本的 Next.js API 端點。

Next.js API 的核心功能

Next.js API 提供了一系列強大的功能，使其成為構建無服務器功能和處理 HTTP 請求的理想選擇。以下是其核心功能的詳細介紹：

1. 無服務器功能

• 無需單獨設置服務器，直接在 pages/api 目錄中定義無服務器功能。
• 提高開發效率，同時優化應用性能。
• 自動處理底層架構，為無服務器功能提供無縫環境。

2. 動態 API 路由

• API 路由通過 pages/api 目錄中的文件名自動定義。
• 例如，創建 pages/api/users.js 文件，其路由為 /api/users。
• 這種結構清晰且易于維護，便于管理動態路由。

3. 自動化中間件

• 內置中間件支持處理身份驗證和跨域資源共享（CORS）。
• 默認解析請求正文，無需額外安裝解析器模塊。
• 中間件函數可模塊化定義，提升代碼的可重用性和組織性。

4. 服務器端渲染（SSR）

• 與 SSR 無縫集成，可在渲染頁面前從服務器端獲取數據。
• 提供更快的加載時間和更好的性能。
• 適用于從外部 API 獲取數據或處理表單提交的場景。

Next.js API 的常見使用場景

Next.js API 在以下場景中表現尤為出色：

1. 獲取外部數據

通過服務器端獲取數據并預渲染，可以顯著提升性能。例如：

// pages/api/indianStates.js
import axios from 'axios';

export default async (req, res) => {
  try {
    const response = await axios.get('https://restcountries.com/v3.1/name/india?fields=name,subregion,capital');
    const indiaInfo = response.data[0];
    const state = {
      state: indiaInfo.name.common,
      subregion: indiaInfo.subregion,
      capital: indiaInfo.capital[0],
    };
    res.status(200).json([state]);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: '內部服務器錯誤' });
  }
};

2. 處理表單提交

通過 API 路由在服務器端驗證和處理表單數據，降低安全風險。例如：

// pages/api/submitForm.js
export default (req, res) => {
  const { method, body } = req;
  if (method === 'POST') {
    console.log('表單數據:', body);
    res.status(200).json({ message: '表單提交成功！' });
  } else {
    res.status(405).json({ error: '不允許的請求方法' });
  }
};

3. 構建后端服務

Next.js API 支持構建輕量級后端服務，例如用戶身份驗證：

// pages/api/authenticate.js
export default (req, res) => {
  const { method, body } = req;
  if (method === 'POST') {
    res.status(200).json({ token: 'your_auth_token' });
  } else {
    res.status(405).json({ error: '不允許的請求方法' });
  }
};

實際應用示例：構建博客應用

以下是使用 Next.js API 構建博客應用的步驟：

步驟 1：設置項目

運行以下命令創建項目：

npx create-next-app@latest my-blog-app

步驟 2：定義 API 路由

在 pages/api 目錄中創建 articles.js 文件，用于從外部 API 獲取文章數據：

// pages/api/articles.js
import axios from 'axios';

export default async (req, res) => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    res.status(200).json(response.data);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: '內部服務器錯誤' });
  }
};

步驟 3：在頁面中獲取數據

在 pages 目錄中創建 blog.js 文件，并通過 API 獲取文章數據：

// pages/blog.js
export default function Blog({ articles }) {
  return (
    

      
博客文章
      

        {articles.map((article) => (
          
{article.title}
        ))}
      
    
  );
}

export async function getServerSideProps() {
  const response = await fetch('http://localhost:3000/api/articles');
  const articles = await response.json();
  return { props: { articles } };
}

步驟 4：運行項目

啟動開發服務器并訪問 http://localhost:3000/blog，即可查看博客文章。

使用 Next.js API 的最佳實踐

以下是一些使用 Next.js API 的建議：

• 保持 API 路由的單一職責：每個路由專注于處理特定任務。
• 采用異步編程：確保高效的數據提取。
• 利用中間件：處理身份驗證和錯誤。
• 提供有意義的錯誤響應：提升調試效率。
• 優化性能：通過緩存和代碼拆分提高速度。
• 記錄和測試：確保代碼的可靠性和可維護性。

總結

Next.js API 提供了強大的功能，使開發者能夠輕松構建無服務器功能、處理 HTTP 請求以及實現高級路由。通過本文的介紹，您應該對 Next.js API 的基本功能和實際應用有了全面的了解。無論是構建簡單的 API 路由還是復雜的后端服務，Next.js 都是現代 Web 開發的強大工具。

編碼愉快！

原文鏈接: https://blogs.purecode.ai/blogs/next-js-api