Router push basePath ignored

[sebascomeau]

Bug report

Describe the bug

We are using basePath for our frontend and when calling Router.push() the basePath is ignored. This seems to only be an issues in a docker image.

Expected behavior

Calling router.push("/ac") with basePath "/resource-finder" in config it should redirect to "/resource-finder/ac".

System information

• OS: Windows
• Version of Next.js: 10.0.2-canary.12
• Version of Node.js: 15.1.0

Additional context

I already opened a ticket for same behavior with SSR #18984

[sebascomeau]

Here's my Dockerfile:

FROM node:15.1.0-alpine

# setting working directory. All the path will be relative to WORKDIR
WORKDIR /app

# installing dependencies
COPY package.json .
COPY yarn.lock .
RUN yarn install

# copying source files
COPY . .

# building app
RUN yarn build

# running the app
CMD [ "yarn", "start" ]

# expose port
EXPOSE 3000

Here's my next.config.js file:

const basePath = process.env.BASE_PATH ?? '';
const environment = process.env.ENVIRONMENT ?? 'UNKNOWN';
const apiBaseUri = process.env.API_BASE_URI ?? '';

/**
 * The main Next.js configuration.
 * see: https://nextjs.org/docs/api-reference/next.config.js/environment-variables
 */
module.exports = {
  basePath,
  publicRuntimeConfig: {
    basePath,
    environment,
    i18n: { lookupCookie: 'locale' },
    apiBaseUri
  }
};

[sebascomeau]

Check related issue comment #18984 (comment)

[sebascomeau]

The basePath doesn't seems to be something that can be changed via a environement variable when running a docker container.

It doesn't seem to have a way to set it with the newer version of setting environment virables.

https://nextjs.org/docs/basic-features/environment-variables

It this config is only set at build time (next.config.js)?

https://nextjs.org/docs/api-reference/next.config.js/basepath

[ijjk]

@sebascomeau correct, the basePath value is only set at build time since it is bundled into the client side files.

It sounds like this isn't a bug and is the expected behavior so I'm going to mark this as closed, feel free to reply with additional info if you are still running into trouble with this.

Looks like we could make this clearer in the above mentioned docs so I'm going to re-open to track

[sebascomeau]

Is there a way to push environement variable from a container to a docker image? or the docker image needs to have a .env file for next used them? I tried to use process.env.NEXT_PUBLIC_API_BASE_URL from the client-side and in the docker image I dont have any .env but I am pushing NEXT_PUBLIC_API_BASE_URL when running the container. But the variable is undefined in client-side. What the good way to push environement variable from a container to the docker image?

I would be nice to have a way to modified the basePath config the same way. That running locally I can test the app from http://localhost:3000 and in a hosting environement http://domain.com/resource-finder so that I can push NEXT_PUBLIC_BASE_PATH:/resource-finder to a container.

[gregory-j-baker]

Requiring that basePath be set at build time means that for anyone doing path-based routing, a separate build must be maintained for every path that the application might be deployed to.

Some organizations (ours included) configure many environments as https://www.example.com/{env-name}/application.

Some organizations (ours included) also mandate that build artifacts be promoted from environment to environment without rebuilding (one of the 12-factor rules).

So, is there any way to achieve what @sebascomeau is looking to do? I am open to submitting a PR if you would kindly provide a starting point. I am not familiar with the next.js project so I have no idea where to start looking.

[gregory-j-baker]

@sebascomeau: one way to solve this problem would be to trigger an npm build at container startup. This would generate the client-side files according to how the environment variables are set.

This is really only a solution for containers, and would lead to pretty large images (thanks, node_modules). It would also increase the container startup time.

It isn't a great solution, in my opinion.. but I'm leaving it here in case others stumble across this issue and are in a bind.

[sebascomeau]

@ijjk did you had time to check @gregory-j-baker comments above?

Thanks

[sebascomeau]

Is their a way to push process.env.NEXT_PUBLIC variables to a container that the app would pickup and expose them to the client without an .env file?

[ijjk]

@sebascomeau NEXT_PUBLIC_ values are the same as the basePath value and need to be provided during build time as they are inlined in the client bundles, you can provide these during a container's build step like normal

[gregory-j-baker]

So does everyone using next.js just deploy their applications to the same base path.. everywhere? Or do they have different builds for each differing base path? I'm interested in knowing what the community is doing.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.