使用 Next.js 和 Netlify 建立首都應用程式

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

我們正在使用什麼

• Next.js
• Netlify
• 打字稿
• Tailwind CSS

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

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

設定項目

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

npx create-next-app Capital-city-app

導覽至專案目錄：

cd 首都-城市-應用

建立首都應用程式

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 (
    <div className="card">
      <h2>{country.name.common}</h2>
      <p>Capital: {country.capital}</p>
      <p>Region: {country.region}</p>
      <img src={country.flags.svg} alt={`${country.name.common} flag`} width="100" />
    </div>
  );
}

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 (
    <div>
      <h1>Capital City App</h1>
      <div className="grid">
        {countries.map((country) => (
          <CountryCard key={country.cca3} country={country} />
        ))}
      </div>
      <style jsx>{`
        .grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
          gap: 20px;
        }
        .card {
          border: 1px solid #ccc;
          padding: 20px;
          border-radius: 10px;
          text-align: center;
        }
      `}</style>
    </div>
  );
};

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 開發提供了強大的組合，讓您能夠專注於建立出色的功能，同時為您處理部署和擴展的複雜性。快樂編碼！

以上是使用 Next.js 和 Netlify 建立首都應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！