Setting up a NextJS development server in a docker environment with networking

Question

Setting up a NextJS development server in a docker environment with networking

Currently, my development environment consists of a NextJS app running in a docker-compose setup under the name frontend.

The backend is powered by an expressjs app known as backend.

In my NextJS app, there's an environment variable that specifies the backend endpoint, which can be either http://backend:3000 or http://localhost:3000. However, setting different endpoints causes issues with client-side versus server-side querying in NextJS.

Is there a way to access the backend from both my host machine and the frontend container using the same URL?

Edited for clarity

version: "3.9"
services:
    frontend:
        image: node:18.14.2
        ports:
            - "8000:8000"
        volumes:
            - ./Frontend:/app
            #      - /app/node_modules/
            - /app/.next/
        environment:
            - NEXT_PUBLIC_BACKEND_BASE_URI=http://backend:3000
            - NEXT_PUBLIC_CMS_URL=http://cms:1337
        working_dir: /app
        command: sh -c "npm install --silent && npm run dev"
    frontend-graphql:
        image: node:18.14.2
        volumes:
            - ./Frontend:/app
            # - /app/node_modules/
            - /app/.next/
        environment:
            - NEXT_PUBLIC_BACKEND_BASE_URI=http://backend:3000
            - NEXT_PUBLIC_CMS_URL=http://cms:1337
        working_dir: /app
        command: sh -c "npm install --silent && npm run dev"
    backend:
        image: node:18.14.2
        ports:
            - "3000:3000"
        working_dir: /app
        volumes:
            - ./Backend:/app
        #      - /app/node_modules/
        command: sh -c "npm install && npm install -g ts-node && npm run dev"
    cms:
        image: node:18.14.2
        ports:
            - "1337:1337"
        working_dir: /app
        volumes:
            - ./CMS:/app
            - /app/node_modules/
        command: sh -c "npm install && npm install --platform=linux --arch=arm64v8 sharp && npm run dev"

docker next.js

Answer 1

Answer №1

In my experience, one of the most effective solutions I have come across involves a workaround using the host.docker.internal hostname.

It's worth noting that while host.docker.internal can be accessed directly within a docker container, with Next.js needing to access the backend server from "outside" the container (in the browser), I found it necessary to map

127.0.0.1 to host.docker.internal

within the /etc/hosts file (this method has been tested on both Mac and Windows).

This setup permits client-side requests to reach , enabling the use of the same hostname for both client-side and server-side queries.

Answer 2

In my experience, one of the most effective solutions I have come across involves a workaround using the host.docker.internal hostname.

It's worth noting that while host.docker.internal can be accessed directly within a docker container, with Next.js needing to access the backend server from "outside" the container (in the browser), I found it necessary to map

127.0.0.1 to host.docker.internal

within the /etc/hosts file (this method has been tested on both Mac and Windows).

This setup permits client-side requests to reach , enabling the use of the same hostname for both client-side and server-side queries.

Answer 3

Answer №2

I came across a helpful resource on setting up server and public runtime configurations here. While there are concerns about deprecation, it is still possible to configure server runtime settings.

Update the next.config.js file:

const nextConfig = {
  serverRuntimeConfig: {
    // Will only be available on the server side
    apiUrl: process.env.NEXT_SERVER_API_URL || 'http://dockerbackend:8000'
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
    apiUrl: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'
  }
}

Modify the @/config/index.ts file:

import getConfig from 'next/config';

const config = getConfig();

let apiUrl = process.env.NEXT_PUBLIC_API_URL;
if (config) {
  apiUrl = config?.serverRuntimeConfig?.apiUrl
}

export {
  apiUrl
}

Include the config file in your code wherever you need to access the API URL:

import { apiUrl } from '@/config'

Answer 4

I came across a helpful resource on setting up server and public runtime configurations here. While there are concerns about deprecation, it is still possible to configure server runtime settings.

Update the next.config.js file:

const nextConfig = {
  serverRuntimeConfig: {
    // Will only be available on the server side
    apiUrl: process.env.NEXT_SERVER_API_URL || 'http://dockerbackend:8000'
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
    apiUrl: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'
  }
}

Modify the @/config/index.ts file:

import getConfig from 'next/config';

const config = getConfig();

let apiUrl = process.env.NEXT_PUBLIC_API_URL;
if (config) {
  apiUrl = config?.serverRuntimeConfig?.apiUrl
}

export {
  apiUrl
}

Include the config file in your code wherever you need to access the API URL:

import { apiUrl } from '@/config'

Setting up a NextJS development server in a docker environment with networking

Answer №1

Answer №2

Similar questions

Unable to access attributes of an unknown object (referencing 'Person')

The progress bars in the Docker console are not showing up as expected

What could be causing the sanity cli to encounter an error during installation?

Setting up Node.js 10 and npm on an Alpine Linux system

Upon deployment, Dokku mistakenly categorizes my Node.js application as a Go app

The nvm is functioning properly within the bash shell, however, it is not working within the

When it comes to successful payments, should you use `checkout.session.async_payment_succeeded` or `checkout.session.completed` in the Stripe event?

What are the steps to eliminate the package-lock.json warning while constructing a Node application image using Docker?

Error message: "CORS issue arises in NextJS custom server following execution of 'npm run build'"

Encountering a type error while trying to use Docker with npm install

Avoid the issue of having duplicate user ids by implementing a locked thread feature within Next.js

Ordering data in GraphQL by its unique identifier

The node-libxml-xsd library encounters an error stating "file not recognized: File format not recognized" while attempting a node-gyp rebuild, potentially causing issues with the xmljs.node file

Issue with handling a Promise Rejection error in a React/Next.js project while working with the openAI API

Encountering a Mongoose Server Selection Error ECONNREFUSED while using a docker-compose file

In order to link a package using npm, the package name must contain a specified name field

There was an error trying to read properties of undefined, specifically the 'prototype', in a code using Next.Js and Express

Securing your Next.js App with Express JWT Authentication

Having trouble locating the services package.json file while executing docker-compose

How to efficiently initialize a Next.js app with Phusion Passenger while triggering the production build using a specific file?