Handling fetch URLs in Dockerized Next.js and FastAPI Apps

Description

Learn how to dynamically select correct API URLs for client and server components in a Dockerized Next.js and FastAPI setup, avoiding common connection errors. --- This video is based on the question https://stackoverflow.com/q/79508608/ asked by the user 'joovil' ( https://stackoverflow.com/u/24228842/ ) and on the answer https://stackoverflow.com/a/79508656/ provided by the user 'Tobi Akintunlese' ( https://stackoverflow.com/u/14417283/ ) 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 uses different URLs for fetch depending if in client or server component with FastApi when dockerized Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/licensing The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license. If anything seems off to you, please feel free to drop me a comment under this video. --- The Challenge: Different URLs for Client and Server Fetch Requests When using Next.js with FastAPI inside Docker containers, client components and server components often require different URLs to access the API. For example: Client components use http://localhost:8000 Server components use http://server:8000 This discrepancy arises because: Client-side code runs in the browser, which needs to access the API on the host machine or a reachable address. Server-side code runs inside the Docker container, which can reach other services by container name (e.g., server). Trying to unify these URLs (e.g., using a single URL in all components) often leads to errors like ERR_NAME_NOT_RESOLVED or fetch failures. The Solution: Dynamically Selecting URLs Based on Execution Context You can simplify your code by dynamically choosing the appropriate API URL depending on whether the code runs on the server or client. Here's how: Step 1: Define Environment Variables Set separate environment variables for the client and server API URLs in your docker-compose.yml: [[See Video to Reveal this Text or Code Snippet]] Note: Prefixing with NEXT_PUBLIC_ exposes the variable to the browser in Next.js. Step 2: Create a URL Selector Function in Your Next.js App Add a helper function that detects the environment and returns the correct API URL: [[See Video to Reveal this Text or Code Snippet]] Step 3: Use the Helper to Make API Calls Whenever you perform a fetch, use the helper function to get the correct base URL: [[See Video to Reveal this Text or Code Snippet]] This approach ensures: Server components request the FastAPI container using Docker network hostname (server). Client components request the API through localhost, which your machine exposes via Docker port mapping. Benefits of This Approach Single point of URL management: No hardcoding multiple URLs in components. Avoids DNS issues: Using the right hostname in each context prevents resolution errors. Clean Environment Setup: Docker Compose environment variables separate concerns clearly. Summary Handling API URLs differently for client and server code is necessary in Dockerized Next.js and FastAPI apps. Using environment variables and a small helper function to detect execution context allows you to use a consistent codebase, reduce errors, and keep your development process smooth.