介绍
今天我们将学习如何使用 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 开发提供了强大的组合，使您能够专注于构建出色的功能，同时为您处理部署和扩展的复杂性。快乐编码！