Tips for customizing the background-image path in CSS modules for Next.js v14 during development and production

Question

Tips for customizing the background-image path in CSS modules for Next.js v14 during development and production

I am currently utilizing Next.js version 14 to construct a webpage with the setup showcased in the image provided below.

https://i.sstatic.net/IMxlm.png

Within my index.module.scss file, I have integrated an image for the background design.

The snippet of code is visible below:

    &::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 the url attribute is located within the /public/img directory, thus the path in the url begins at /img.

I aim to modify the path of the url in the index.module.scss file during both npm run dev and npm run build operations.

During development (dev), which runs locally on localhost:3000, no changes are necessary. However, during production deployment (build), I wish for it to be situated at the second level domain sampledomain.com/path-to-site/.

Please refrain from providing solutions involving web search, blog posts, or responses generated by Chat GPT.

For instance, previous suggestions involved incorporating environment variables before the path, but this resulted in errors.

In addition, I lack knowledge on how to configure webpack within next.config.js, as my expertise does not extend to webpack configurations.

javascript next.js next.js13 css-modules next.js14

Answer 1

Answer №1

When placing environment variables in front of the path, they may not function as intended because they are primarily meant to work with JavaScript files. However, you can still utilize them by incorporating an empty component with CSS using the environment variable as a condition.

To do this, start by segregating the CSS for two environments into separate files, namely localBackground.css and buildBackground.css.

Next, create two empty components that solely import the corresponding CSS file, named BackgroundLocal.tsx and BackgroundBuild.tsx. The structure of these files is straightforward:

/*for local environment */
import "./localBackground.css";   // link to your CSS file
export default function BackgroundLocal() {
  return <></>;
}

/*for build environment*/
import "./buildBackground.css";   // link to your CSS file
export default function BackgroundBuild() {
  return <></>;
}

Subsequently, dynamically import these two files based on a condition linked to the 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 an environment variable set to `true` for local development and `false` for production builds*/
const DynamicBG = process.env.IsLocal ? DynamicBgL : DynamicBgB;
...
export default function MainPage(){
  return(
        ...
    <DynamicBG/>
    ...
}

I trust that you find this guidance helpful!

Answer 2

When placing environment variables in front of the path, they may not function as intended because they are primarily meant to work with JavaScript files. However, you can still utilize them by incorporating an empty component with CSS using the environment variable as a condition.

To do this, start by segregating the CSS for two environments into separate files, namely localBackground.css and buildBackground.css.

Next, create two empty components that solely import the corresponding CSS file, named BackgroundLocal.tsx and BackgroundBuild.tsx. The structure of these files is straightforward:

/*for local environment */
import "./localBackground.css";   // link to your CSS file
export default function BackgroundLocal() {
  return <></>;
}

/*for build environment*/
import "./buildBackground.css";   // link to your CSS file
export default function BackgroundBuild() {
  return <></>;
}

Subsequently, dynamically import these two files based on a condition linked to the 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 an environment variable set to `true` for local development and `false` for production builds*/
const DynamicBG = process.env.IsLocal ? DynamicBgL : DynamicBgB;
...
export default function MainPage(){
  return(
        ...
    <DynamicBG/>
    ...
}

I trust that you find this guidance helpful!

Tips for customizing the background-image path in CSS modules for Next.js v14 during development and production

Answer №1

Similar questions

Creating a node.js function that can be used with OracleDB

Vitejs is currently loading the entire bundle size instead of just the specific selected files

What is the best way to save geolocation coordinates in a Javascript array?

CSS - owl carousel automatically stretches images to full width

I am planning to divide my web application into two sections by utilizing react router. I intend to incorporate a router within one of the routes mentioned earlier

Issues with Vuex store causing incorrect value retrieval

The click functionality is not functioning properly within the .each() loop

Retrieve information from a .json file using the fetch API

Ways to trigger an npm script from a higher-level directory?

Switching on and off a class in Next.js

After a period of time since the server has been initialized, the function req.isAuthenticated() no

How can I submit multiple dropdown menus when they are changed?

Sidebar navigation text shifting during transition

The time-out counter fails to detect the input field

Ways to remove the address bar from a mobile browser like Chrome or an Android browser

A guide on incorporating Google authentication into Vue.js with the use of TypeScript and the component-based syntax

Using AngularJS with the Phonegap Facebook plugin

Combine rows with the same value in the first column of an HTML table

I keep encountering an ENOENT error whenever I try to kick off the project using npm start in Next.js. Can someone help me figure out

The JQuery CSS function is unable to alter the height of the element