This is 3rd version of the rest countries API with Nextjs, you could see the previous 2 versions:
The previous 2 versions were built using TypeScript and JavaScript respectively, with React, and Tailwind CSS being used in both cases. The state management in the TypeScript version was handled through the use of React Hooks such as useContext, useReducer and useMemo.
The current version, on the other hand, is built using Nextjs and Redux Toolkit Query. Additionally, the current version included a couple of new features and improvements that were not present in the previous versions.
In terms of functionality, all three versions share the same core features: a search box for users to search for specific countries and a dropdown menu that enables them to filter countries based on regions. Users can also click on a country to view more detailed information about it.
New features/improvement
- Users now can search countries based on the text and region
- Implement skeleton layout to minimize layout shifts while fetching the API
- A clear search button to reset the search box, region and cards per page limit (to 9)
- A small window to display country cards, allows users to click the load more button to view more countries if available without or minimize the need to scroll up
The user should be able to:
- Display a list of all countries fetched from the API on the homepage, along with a
Load Morebutton to load more countries if available - Provide a dropdown menu to filter countries by region, and a search box to search countries by text
- Include a
Clear Searchbutton to clear the search results and display all countries again - Allow users to click on a country card to view more detailed information about the country on a separate page
- Enable users to navigate to the bordering countries of a selected country on the detail page
- Provide a toggle switch to switch between light and dark color schemes for the user interface
Overall and theme toggle demo
search-text-region.mp4
Search countries by search box and/or region
overall-theme-toggle.mp4
Load More and Clear Search button
load-more-and-clear-button.mp4
git clone git@github.com:victoriacheng15/rest-countries-api-next.gitcd rest-countries-api-nextnpm install
# or your preference of package managernpm run devNextjs - app directory
The app directory in Nextjs is a directory that contains all the files that are necessary to configure and run your app. I think one of the advantages of using the app directory is that it allows you to organize your routes and nested routes more intuitively.
Redux Toolkit Query
RTK Query is a tool that is similar to RTK, but with the added benefit of completely managing the data fetching process, eliminating the need to write useEffect hooks. One feature that I find particularly useful is that RTKQ allows you to provide a base URL and define multiple endpoints to fetch specific information required by the application.
In my project, I gave the base URL to RTKQ and added two different endpoints. The first endpoint was used to fetch all countries, while the second endpoint was used to fetch a single country based on its code. This simplified the code and eliminated the need to write async/await functions within the useEffect block.
The app directory in Next.js is currently in an experimental phase, meaning that it is not yet considered a stable feature. As a result, there may still be changes made to this feature before it becomes stable. Therefore, I am keeping an eye out for any potential changes that could affect my application's functionality. Once the feature is stable, it should be safe to use without any major concerns about breakages.
