使用 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中文网其他相关文章！