Building a Capital City App With Next.js and Netlify

Introduction
Today we will be learning how to build a capital city app using Next.js and Netlify. In today's fast-paced digital world, creating interactive and dynamic web applications is crucial for engaging users and providing them with a seamless experience. Next.js, a popular React framework, allows developers to build powerful server-side rendered (SSR) applications effortlessly. When combined with Netlify, a modern web development platform, you can deploy your applications with ease and take advantage of its robust features like continuous deployment, serverless functions, and global CDN. In this article, we'll explore how to build a Capital City App using Next.js and deploy it on Netlify.

What we’re using

• Next.js
• Netlify
• TypeScript
• Tailwind CSS

Prerequisites
Before we dive in, ensure you have the following installed:

• Node.js (v14 or later)
• npm or yarn
• Git

Setting Up the Project

First, let's create a new Next.js project. Open your terminal and run the following command:

npx create-next-app capital-city-app


Navigate to the project directory:

cd capital-city-app


Creating the Capital City App

1. Setting Up the API For our Capital City App, we'll use a free API that provides data about countries and their capitals. One such API is the REST Countries API. Create a file named api.js in the lib directory to fetch data from the 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. Creating the Components Let's create a CountryCard component to display individual country details. Create a file named CountryCard.js in the components directory:

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. Fetching and Displaying Data In your pages/index.js file, fetch the country data and display it using the CountryCard component:

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;

Deploying on Netlify

1. Setting Up the Repository

Initialize a git repository in your project:
git init
git add .
git commit -m "Initial commit"

2. Deploying to Netlify

1. Create a New Site on Netlify: Go to Netlify and log in. Click on "New site from Git".
2. Connect to Your Git Repository: Choose your Git provider (GitHub, GitLab, Bitbucket) and select your repository.
3. Configure Your Build Settings:

• Build Command: next build
• Publish Directory: .next

Deploy the Site: Click "Deploy site". Netlify will automatically build and deploy your site.

3. Setting Up Continuous Deployment

Whenever you push changes to your repository, Netlify will automatically trigger a new build and deploy the updated version of your app.

Conclusion

Congratulations! You have successfully built and deployed a Capital City App using Next.js and Netlify. This app fetches data from the REST Countries API and displays it in a user-friendly manner. With Next.js's server-side rendering and Netlify's powerful deployment features, you can create and deploy dynamic web applications efficiently.

Next.js and Netlify make a powerful combination for modern web development, allowing you to focus on building great features while handling the complexities of deployment and scaling for you. Happy coding!