How to change the path of background-image in css modules of Next.js v14 when dev and build

Question

I am using Next.js v14 to create a page with the configuration in the attached image.

In index.module.scss, I am using an image for the background.

Below is a portion of the code.

    &::before {
        left: 0;
        background: url(/img/pc/index_hero_bg1.png) 0 0 repeat-x;
    }

    &::after {
        right: 0;
        background: url(/img/pc/index_hero_bg2.png) 0 0 repeat-x;
    }

The image specified in url is in /public/img, so the image path in url starts at /img.

I want to change the path of url in index.module.scss in npm run dev and npm run build.

The dev is localhost:3000, so I can leave it as it is, but for the build I want it to be on the second level sampledomain.com/path-to-site/.

No search, no blog post, and no answer using Chat GPT.

For example, the answer was to put the environment variable in front of the path, but I get an error.

Also, I don't know how to configure webpack in next.config.js, because I have no knowledge of webpack.

Answer 1

you need to define the asset prefix in your next.config.js file.

// next.config.js
module.exports = {
  basePath: '/path-to-site', // This sets the base path for your application
  assetPrefix: '/path-to-site/', // This sets the asset prefix for your assets
};

in your SCSS file, you can reference the background images

&::before {
    left: 0;
    background: url('/img/pc/index_hero_bg1.png') 0 0 repeat-x;
}

&::after {
    right: 0;
    background: url('/img/pc/index_hero_bg2.png') 0 0 repeat-x;
}

edit:

// next.config.js
module.exports = {
  basePath: '/path-to-site', // This sets the base path for your application
  assetPrefix: '/path-to-site/', // This sets the asset prefix for your assets
  sassOptions: {
    prependData: `
      $assetPrefix: '${process.env.ASSET_PREFIX}';
    `,
  },
};

Answer 2

Environment variables will not work if you put them in front of the path because they are primarily designed to run with js file. However, you can still make use of it by importing an empty component with css using environment variable as condition.

First you will need to place the css of two environments into two separated css files (localBackground.css and buildBackground.css)

Then, you will need two empty components that do nothing but import the css file (BackgroundLocal.tsx and BackgroundBuild.tsx). The content of these two files can simply be like below:

/*for the local */
import "./localBackground.css";   // your css file path
export default function BackgroundLocal() {
  return <></>;
}

/*for the build*/
import "./buildBackground.css";   // your css file path
export default function BackgroundBuild() {
  return <></>;
}

After this, you will need to dynamically import these two files with condition checking based on environment variables:

"use client"
import dynamic from "next/dynamic";
...
const DynamicBgL = dynamic(() => import("@/components/BackgroundLocal"), {
  ssr: false,
});
const DynamicBgB = dynamic(() => import("@/components/BackgroundBuild"), {
  ssr: false,
});

/*IsLocal is a environment variable which will be `true` for local development and `false` for build*/
const DynamicBG = process.env.IsLocal ? DynamicBgL : DynamicBgB;
...
export default function MainPage(){
  return(
        ...
    <DynamicBG/>
    ...
}

Hope this can help!