Скачать или смотреть Fixing 404 Errors in Localized Next.js API Routes on Localhost

Learn how to resolve `localized API route` issues in Next.js when running on localhost. This guide helps you simplify your API calls without locale-specific handling.
---
This video is based on the question https://stackoverflow.com/q/72973718/ asked by the user 'timgcarlson' ( https://stackoverflow.com/u/2241714/ ) and on the answer https://stackoverflow.com/a/73073629/ provided by the user 'timgcarlson' ( https://stackoverflow.com/u/2241714/ ) 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: Next.JS: How to use localized API routes when running on localhost, or alternatively how to have a single API route for all locales

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.
---
How to Fix 404 Errors in Localized Next.js API Routes on Localhost

When building applications with Next.js, localization is crucial for providing content in different languages. However, developers may encounter challenges, particularly with API routes when running their localized app on localhost. A common issue arises when an API route fails with a 404 error due to locale prefixes. If you are experiencing this problem, you're not alone! In this post, we will break down the issue and provide a straightforward solution to ensure your API routes work as intended without generating errors.

Understanding the Problem

When you create localized routes in a Next.js application, each locale corresponds to a separate path on your server. This means that if you're running your localized app on localhost, your API routes may include the locale in the URL:

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

The key point here is that when you fetch the API route in your client code with a path that does not begin with a forward slash, it assumes a relative path instead of an absolute path. As a result, your API calls will fail if you are not on the default locale.

Why It Works on Vercel

When you deploy your Next.js app to Vercel, the platform handles localized serverless functions for every locale specified in your next.config.js. This means the serverless environment automatically routes requests correctly, regardless of the locale, preventing the 404 errors you tend to face on localhost.

Solution: Use Absolute Paths in Your API Fetch

The solution is simple yet effective: always start your API route with a forward slash. This ensures that the path is considered absolute relative to your domain rather than relative to the current URL. Let’s break down the necessary code change:

Original Fetch Code

Here’s how the fetch call looks originally, leading to errors:

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

Updated Fetch Code

To fix the issue, modify the fetch statement to include a leading forward slash:

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

Explanation of the Change

Relative vs Absolute Path: By adding the forward slash, you're making it clear that you want to start fetching from the root of your application instead of a relative path that includes the locale.

Consistent Behavior: With this change, your API calls will behave consistently across all locales, preventing any 404 errors while running on localhost.

Conclusion

In summary, when you encounter issues with localized API routes in your Next.js application on localhost, simply ensure that you are using absolute paths for your fetch requests. This small change can save you from frustrating debugging sessions and allows for a seamless development experience. Now, you can focus on building amazing, localized experiences for your users without any disruptions.

Feel free to reach out with any questions or further inquiries about using Next.js and localization in your applications!