Applying CSS link dynamically in NextJS based on the window width

Is it feasible to adjust NextJS link stylesheets depending on media queries in the context of using css modules? Here is an example:

CSS module file:

@media(max-width: 800px) {
  .myClass{
    /* ...mobile styles */
  }
}
@media(min-width: 800px) {
  .myClass{
    /* ...desktopstyles */
  }
}
.myClass {
  /* all media styles */
}

How NextJS generates the links:

<link rel="stylesheet" href="/_next/static/css/<bundle-number>.css">

Desired outcome:

<link rel="stylesheet" href="/_next/static/css/<bundle-number-desktop>.css" media="(min-width: 800px)">
<link rel="stylesheet" href="/_next/static/css/<bundle-number-mobile>.css" media="(max-width: 800px)">
<link rel="stylesheet" href="/_next/static/css/<bundle-number-all-medias>.css" data-n-p="">

In my investigations, I have not yet discovered a solution to this issue.

cssnext.jscss-modules

Answer №1

To put it simply, the answer is a bit of a mixed bag.
If you're looking to have your code automatically separated and managed by Next.js, it may not be possible at the moment (unless you make some adjustments to the custom server approach).

However, as a workaround, you can just include the CSS file like in the good old days. 

<link rel="stylesheet" type="text/css" href="style.css" your-property-goes-here>

You could consider doing this within the _document.{tsx|jsx} file.
The only downside in your situation is that you mentioned using CSS modules. In that case, you might need to revert back to using traditional class/className.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What distinguishes the creation of HTML Emails from HTML Email Signatures?

In my opinion, I may be overthinking this but is there a distinction in how HTML Emails and HTML Email Signatures are constructed and displayed? It seems that when I search for HTML Email Signatures, results mainly focus on HTML Emails. Some results do tou ...

htmlcssemailhtml-email

Use JavaScript to convert only the initial letter to uppercase

Once again, I am in the process of learning! Apologies for the simple questions, but learning is key... Attempting to implement a trick I found online to change all letters to uppercase, I am now trying to adjust it to only capitalize the first letters. T ...

javascripthtmlcss

The resource was treated as an image but sent with the MIME type application/octet-stream

Upon accessing my webpage, a warning message is displayed: Resource interpreted as Image but transferred with MIME type application/octet-stream The images on my page are in JPEG format. The server writes the image bytes to an output stream and sends it ...

javascripthtmlcssbrowsermime-types

employing personalized CSS styles

When I implement the following code: <div class="metanav"> ... </div> Every element inside that div will inherit the styling of .metanav. But if I duplicate .metanav in the CSS and rename it to A; then update the div's class to: <d ...

htmlcsscss-selectors

Leveraging AWS S3 and Next.js getStaticProps with UTF8 format

While utilizing getStaticProps to fetch posts from my Wordpress CMS using the example provided at https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress, I encountered UTF-8 errors only when I uploaded the files to Amazon S3. This issue seems ...

reactjsamazon-web-servicesamazon-s3utf-8next.js

Here's a unique rewrite: "Learn how to manipulate the CSS class of a textarea element (specifically in NicEdit) by utilizing the addClass

I am currently validating a textarea using the NicEdit plugin. var getContent = nicEditors.findEditor("SubSliderDescription").getContent(); bValid = bValid && checkBlankTextArea(getContent, "SubSliderDescription") function checkBlankTextArea(o, ...

javascriptjqueryhtmlcssnicedit

Is it possible to combine margin auto with a transform on the left simultaneously?

While examining a webpage, I noticed a positioning issue and decided to remove some CSS code to determine the root of the problem. It appears that the navbar has a 1px gap on the left side from the edge of the screen. After removing the last two lines of c ...

css

Having trouble connecting Nextjs with ChromaDB?

I am encountering issues while trying to establish a connection with the Chromadb vector database in Nextjs. The objective is to store user-generated content in Chromadb. Below is the code snippet I am utilizing along with its dependencies: Dependencies V ...

javascripttypescriptnext.jschromadb

What is the best way to make my div equal in height to its preceding div sibling?

I want my new div to match the height of the previous one. I'm using percentages for width and height to ensure it displays properly on mobile devices as well. I've tried setting the parent elements to 100% width and height based on suggestions f ...

htmlcssheightpercentagesiblings

Is there a way to spin the picture but keep the container still?

Is there a way to animate the rotation of the gradient color without rotating the rhombus? I attempted using transform: rotate, but it ended up rotating the entire shape. Any suggestions on how to achieve this effect? .box { position: absolute; top ...

htmlcsscss-animations

Implement Bootstrap and CSS to ensure that my content appears below the header when users scroll down

I am struggling with a simple HTML page that is working well with CSS, but encountering an issue where the input form gets placed above the header when scrolling down. I want the header to always remain above the content even while scrolling. Any suggesti ...

htmlcss

What methods are available to keep a component in a fixed position on the window during certain scrolling intervals?

I need help creating a sidebar similar to the one on this Airbnb page. Does anyone have suggestions for how to make a component stay fixed until you scroll past a certain section of the page? I am working with functional React and Material-UI components, ...

cssreactjstypescriptmaterial-uifrontend

Clearing LocalStorage and Cache upon initial loading in Next.js

Our project requires continuous updates, and currently users are required to manually clear their cache and localStorage data after each update in order to access the new features. Is there a solution to automatically clear all cached data upon user visi ...

javascriptreactjsnext.jslocal-storage

What could be the reason for the malfunction of jQuery's show() function?

Using jQuery, I have implemented a functionality to hide a div using the hide() method. However, upon clicking a link, the div is supposed to show but unexpectedly disappears after appearing briefly. HTML Code Snippet <div id="introContent"> & ...

javascriptjqueryhtmlcss

Integrating a footer into the enhanced search tab slider

I'm struggling to create a sticky footer like the one on w3schools. Even though I used the same code in my material UI demo, it's not functioning properly. I tried debugging by changing the position from fixed to absolute, but it still isn&apos ...

javascripthtmlcssreactjsmaterial-ui

The footer seems to be losing its stickiness and not staying at the bottom when I

My goal is to create a sticky footer for my webpage. Once you click the add new sports button, a drawer slides out and the footer remains fixed at the bottom. However, as I scroll down the page, the footer moves up instead of staying in place. I have tried ...

javascripthtmlcssreactjsmaterial-ui

An issue encountered with getServerSideProps in NextJS 12 is causing a HttpError stating that cookies are not iterable, leading

Currently, I have an application running smoothly on my localhost. However, when it comes to production, an unexpected error has popped up: Error: HttpError: cookies is not iterable at handleError (/usr/src/.next/server/chunks/6830.js:163:11) at sendReques ...

javascriptreactjsnext.js

encountering an error with hook calls within a functional component despite using hooks correctly

https://i.stack.imgur.com/iATJi.pngGreetings! I am currently working on a Next.js app using Axios and TanstackQuery. My goal is to redirect to the "/login" page when a 401 error is caught by the AxiosInterceptorInstance. The React version is 18, react-dom ...

reactjsnext.jsaxios

The mobile responsive view in Chrome DevTools is displaying incorrect dimensions

Seeking some clarification on an issue I encountered: I recently created a simple webpage and attempted to make an element full width using width: 100vw. However, I observed that on screens smaller than around 300px, the element appeared smaller and not t ...

htmlcssgoogle-chrome

There seems to be an error with JVectorMap: the <g> attribute transform is expecting a number but is instead receiving "scale(NaN) translate(N..."

Hey there! I'm currently working on creating a form with a map to select the country of birth using JVectorMap. However, when checking the Google Chrome developer console, I encountered the following error message: jquery-jvectormap-2.0.5.min.js:1 Err ...

javascripthtmlcssjvectormap