Next.js Installation

Step-by-step guide to integrate Countries Cities AR with Next.js App Router

Compatibility: Next.js 13+ with App Router

1. Install the package

npm install countries-cities-ar

2. Create a Server Component

Server components can use the library directly without client-side JavaScript:

app/countries/page.tsx

import { allCountries, getCountryByCode } from 'countries-cities-ar';

export default function CountriesPage() {
  const egypt = getCountryByCode('EG');
  
  return (
    <div>
      <h1>Countries: {allCountries.length}</h1>
      <h2>{egypt?.nameAr}</h2>
      <ul>
        {egypt?.cities.map((city, i) => (
          <li key={i}>{city.nameAr}</li>
        ))}
      </ul>
    </div>
  );
}

3. Create a Client Component

For interactive features, create a client component:

components/CountrySelector.tsx

'use client';

import { useState } from 'react';
import { allCountries, type Country } from 'countries-cities-ar';

export default function CountrySelector() {
  const [selected, setSelected] = useState<Country | null>(null);
  
  return (
    <div>
      <select onChange={(e) => {
        const country = allCountries.find(c => c.code === e.target.value);
        setSelected(country || null);
      }}>
        <option value="">Select Country</option>
        {allCountries.map(country => (
          <option key={country.code} value={country.code}>
            {country.nameAr}
          </option>
        ))}
      </select>
      
      {selected && (
        <div>
          <h3>{selected.name}</h3>
          <p>{selected.cities.length} cities</p>
        </div>
      )}
    </div>
  );
}

4. Use in your page

app/page.tsx

import CountrySelector from '@/components/CountrySelector';

export default function Home() {
  return (
    <main>
      <h1>Select your country</h1>
      <CountrySelector />
    </main>
  );
}

5. TypeScript Configuration

The library includes TypeScript definitions. No additional setup required!

// Types are automatically available
import type { Country, City } from 'countries-cities-ar';

const processCountry = (country: Country) => {
  console.log(country.name);
  console.log(country.nameAr);
  console.log(country.cities.length);
};

Pro Tips

• Use Server Components for static data to reduce client bundle size
• Import only the functions you need for better tree-shaking
• Consider using dynamic imports for large components