Скачать или смотреть Solving the Issue of Fetching Translations with axios in Next.js

Discover how to fix the problem of fetching translations based on language headers in your Next.js app using `axios`. Learn how to ensure localized content is loaded correctly!
---
This video is based on the question https://stackoverflow.com/q/65450722/ asked by the user 'Mera Sayed' ( https://stackoverflow.com/u/14746448/ ) and on the answer https://stackoverflow.com/a/65456386/ provided by the user 'juliomalves' ( https://stackoverflow.com/u/1870780/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Fetching translations based on language header with axios isn't working

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Solving the Issue of Fetching Translations with axios in Next.js

Building a multilingual website can be quite a challenge, especially when it comes to ensuring that the correct translations are displayed according to the user's selected language. If you’ve ever faced the issue of only one language appearing despite setting up your translations properly, you’re not alone. This guide addresses a common problem faced by developers using Next.js and axios for making requests: Fetching translations based on language headers is not working.

Understanding the Problem

The problem arises when you’re trying to fetch translations for different components of your site based on the user's selected language. You may have implemented Promise.all() to make multiple API calls, but only one language's data appears on the page. This is particularly frustrating if you notice that fetching data for a single component works perfectly.

In the example discussed, the user has set up internationalized routing using Next.js and initialized language headers for axios. However, they faced an issue when they tried to call multiple endpoints using the fetch API, which doesn’t carry the language header set in axios. As a result, the application defaults to one language only.

Breaking Down the Solution

To resolve this issue, we need to ensure that the API calls for all components use axios rather than the fetch API. By doing this, the language headers set in axios will effectively be included in each API request.

Making Axios Work for Multiple API Calls

Remove Fetch API Call: You need to replace the use of fetch with axios.get() in your index.js to ensure that the custom headers, such as the Language, are consistently applied.

Updating the Async Function: Here’s an updated version of your index.getInitialProps using axios for all your API calls:

[[See Video to Reveal this Text or Code Snippet]]

Ensuring Language Headers Are Used: By setting the Language header with axios.defaults.headers.common['Language'] = langCode;, all subsequent requests made through axios will include the appropriate language.

Conclusion

By simply switching from fetch to axios for your API calls, you can ensure that all the relevant headers, including the Language, are transmitted with each request. This means you'll be able to see the correct translations for your components based on the user's selected language.

Remember: Whenever you're dealing with headers that are vital for the request (such as localization in APIs), ensure that the method you're using to make requests supports them. In this case, switching to axios resolved the problem.

Now that you understand how to tackle fetching translations effectively, you can enhance your Next.js application and ensure a seamless experience for users across different languages. Happy coding!