This website displays countries in list and details about a country such as its population, languages, neighbors...
- fetching countries from an API
- responsive layout
- search
- filter by country, region
- dark mode
- random country using middleware or button
- language switch (en & fr)
- SEO optimized with metadata
- Incremental Static Regeneration (ISR) for better performance
- Accessibility features (ARIA labels, semantic HTML)
This project is using NextJS with app router and the following :
- Bun (package manager and runtime)
- Lucide icons
- Mapbox
- Eslint
- TypeScript
- Next Themes (dark mode)
Data is coming from https://restcountries.com
The site is deployed on vercel
Countries list
Country details
Performance
This project was made with of tutorial made by Thu Nghiem
This is a Next.js project bootstrapped with create-next-app.
To run the project locally, run the development server as following:
bun i
bun devOpen http://localhost:3000 with your browser to see the result.
bun dev- Starts the development serverbun run build- Builds the application for productionbun start- Starts the production serverbun lint- Runs ESLint to check code qualitybun run format- Formats code using Prettierbun run typecheck- Runs TypeScript type checking
src/
├── api/ # API functions for fetching data
├── app/ # Next.js app router pages
│ └── [lang]/ # Internationalized routes
├── components/ # React components
├── functions/ # Utility functions
├── hooks/ # Custom React hooks
├── styles/ # CSS modules
└── types/ # TypeScript type definitions
See .env.example for available environment variables. Currently supports:
NEXT_PUBLIC_API_URL- Override the REST Countries API URL (optional)
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.