介紹
今天我們將學習如何使用 Next.js 和 Netlify 建立首都應用程式。在當今快節奏的數位世界中，創建互動式動態 Web 應用程式對於吸引用戶並為他們提供無縫體驗至關重要。 Next.js 是一種流行的 React 框架，它允許開發人員輕鬆建立強大的伺服器端渲染 (SSR) 應用程式。與現代 Web 開發平台 Netlify 結合使用時，您可以輕鬆部署應用程式並利用其強大的功能，例如持續部署、無伺服器功能和全域 CDN。在本文中，我們將探討如何使用 Next.js 建立 Capital City 應用程式並將其部署在 Netlify 上。

我們正在使用什麼

• Next.js
• Netlify
• TypeScript
• Tailwind CSS

先決條件
在我們深入之前，請確保您已安裝以下軟體：

• Node.js（v14 或更高版本）
• npm 或紗線
• Git

設定項目

首先，讓我們建立一個新的 Next.js 專案。打開終端並執行以下命令：

npx create-next-app Capital-city-app

導航至專案目錄：

cd 首都-城市-應用

創建 Capital City 應用程式

1. 設定 API 對於我們的 Capital City 應用程序，我們將使用免費的 API，該 API 提供有關國家及其首都的數據。 REST 國家 API 是此類 API 之一。在 lib 目錄中建立一個名為 api.js 的檔案以從 API 取得資料：

export async function getCountries() {
    const res = await fetch('https://restcountries.com/v3.1/all');
    if (!res.ok) {
      throw new Error('Failed to fetch data')
    }
    const data = await res.json();
    return data;
  }

1. 創建組件 讓我們建立一個 CountryCard 組件來顯示各個國家/地區的詳細資訊。在元件目錄中建立一個名為 CountryCard.js 的檔案：

import React from 'react';

const CountryCard = ({ country }) => {
  return (
    

      
{country.name.common}
      
Capital: {country.capital}
      
Region: {country.region}
      
    
  );
}

export default CountryCard;

1. 取得並顯示數據 在pages/index.js 檔案中，取得國家/地區資料並使用 CountryCard 元件顯示它：

import { getCountries } from '../app/lib/api';
import CountryCard from '../components/CountryCard';

export async function getStaticProps() {
  const countries = await getCountries();
  return {
    props: {
    countries,
    },
  };
}

const Home = ({ countries }) => {
  return (
    

      
Capital City App
      

        {countries.map((country) => (
          
        ))}
      
      
    
  );
};

export default Home;

在 Netlify 部署

1.設定儲存庫

在專案中初始化 git 儲存庫：
git 初始化
git add .
git commit -m "初始提交"

2.部署到 Netlify

1. 在 Netlify 上建立新網站：前往 Netlify 並登入。點選“New site from Git”。
2. 連接到您的 Git 儲存庫：選擇您的 Git 提供者（GitHub、GitLab、Bitbucket）並選擇您的儲存庫。
3. 配置您的建置設定：

• 建置指令：下一個建置
• 發布目錄：.next

部署網站：按一下「部署網站」。 Netlify 將自動建置和部署您的網站。

3.設定持續部署

每當您將變更推送到儲存庫時，Netlify 都會自動觸發新的建置並部署應用程式的更新版本。

結論

恭喜！您已使用 Next.js 和 Netlify 成功建置並部署了 Capital City 應用程式。該應用程式從 REST 國家/地區 API 獲取數據並以用戶友好的方式顯示它。透過 Next.js 的伺服器端渲染和 Netlify 強大的部署功能，您可以有效率地建立和部署動態 Web 應用程式。

Next.js 和 Netlify 為現代 Web 開發提供了強大的組合，使您能夠專注於建立出色的功能，同時為您處理部署和擴展的複雜性。快樂編碼！