Next.js와 Netlify를 사용하여 Capital City 앱 구축

소개
오늘 우리는 Next.js와 Netlify를 사용하여 수도 앱을 구축하는 방법을 배울 것입니다. 오늘날 빠르게 변화하는 디지털 세계에서 대화형의 동적 웹 애플리케이션을 만드는 것은 사용자의 참여를 유도하고 원활한 경험을 제공하는 데 매우 중요합니다. 인기 있는 React 프레임워크인 Next.js를 사용하면 개발자는 강력한 SSR(서버 측 렌더링) 애플리케이션을 손쉽게 구축할 수 있습니다. 최신 웹 개발 플랫폼인 Netlify와 결합하면 애플리케이션을 쉽게 배포하고 지속적인 배포, 서버리스 기능, 글로벌 CDN과 같은 강력한 기능을 활용할 수 있습니다. 이 기사에서는 Next.js를 사용하여 Capital City 앱을 구축하고 Netlify에 배포하는 방법을 살펴보겠습니다.

사용 중인 제품

• Next.js
• 넷티파이
• 타입스크립트
• 테일윈드 CSS

전제조건
시작하기 전에 다음이 설치되어 있는지 확인하세요.

• Node.js(v14 이상)
• npm 또는 원사
• 깃

프로젝트 설정

먼저 새로운 Next.js 프로젝트를 만들어 보겠습니다. 터미널을 열고 다음 명령을 실행하세요.

npx 생성-다음-앱 수도-도시-앱

프로젝트 디렉토리로 이동하세요:

cd Capital-city-앱

Capital City 앱 만들기

1. API 설정 Capital City 앱의 경우 국가와 수도에 대한 데이터를 제공하는 무료 API를 사용합니다. 그러한 API 중 하나가 REST 국가 API입니다. API에서 데이터를 가져오려면 lib 디렉터리에 api.js라는 파일을 만듭니다.

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. 데이터 가져오기 및 표시 페이지/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 commit -m "초기 커밋"

2. Netlify에 배포

1. Netlify에서 새 사이트 만들기: Netlify로 이동하여 로그인한 후 "Git에서 새 사이트"를 클릭하세요.
2. Git 저장소에 연결: Git 제공업체(GitHub, GitLab, Bitbucket)를 선택하고 저장소를 선택하세요.
3. 빌드 설정 구성:

• 빌드 명령: 다음 빌드
• 게시 디렉토리: .next

사이트 배포: "사이트 배포"를 클릭하세요. Netlify가 자동으로 사이트를 구축하고 배포합니다.

3. 지속적 배포 설정

저장소에 변경 사항을 푸시할 때마다 Netlify는 자동으로 새 빌드를 트리거하고 앱의 업데이트된 버전을 배포합니다.

결론

축하합니다! Next.js 및 Netlify를 사용하여 Capital City 앱을 성공적으로 구축하고 배포했습니다. 이 앱은 REST Countries API에서 데이터를 가져와 사용자 친화적인 방식으로 표시합니다. Next.js의 서버측 렌더링과 Netlify의 강력한 배포 기능을 사용하면 동적 웹 애플리케이션을 효율적으로 만들고 배포할 수 있습니다.

Next.js와 Netlify는 최신 웹 개발을 위한 강력한 조합을 제공하므로 배포 및 확장의 복잡성을 처리하는 동시에 뛰어난 기능을 구축하는 데 집중할 수 있습니다. 즐거운 코딩하세요!

위 내용은 Next.js와 Netlify를 사용하여 Capital City 앱 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!