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 could be the reason behind Google and Bing's mobile-friendly tests inaccurately flagging my site as non-mobile friendly?

Our website for resources is responsive and has been thoroughly tested on various real smartphones, including iPhone, Android, and Windows devices. It looks great on every phone we've tested it on. You can visit the resources website here: The site ...

cssmobile

Place items at the lower part of the container rather than the top

My <ul> has a fixed height and I want the <li> elements inside it to stack at the bottom instead of the top. I attempted using vertical-align: bottom on the <ul>, but that didn't have any effect. The <li> content may overflow ...

htmlcssflexbox

Using Column CSS Property with Google Maps in Chrome: A Potential Bug?

I'm facing an interesting issue and I could use some help understanding or fixing it. It seems like there might be a bug or a solution to this problem. I am currently working on a layout using the CSS3 property columns. Everything looks fine in Firefo ...

htmlcssgoogle-mapsgoogle-chrome

Best Practices for Implementing the 960 CSS Clear Class

I'm puzzled by the necessity of using the clear class in the 960 css framework. Every time I remove a div with the clear class, everything seems to function properly. Can you explain to me the significance and purpose behind this class? ...

cssframeworks960.gs

Alter the background image of a DIV based on the selected menu item

I am working on a project that involves a div element with the class "jumbotron" which currently has a background image applied to it. Additionally, I have a menu consisting of 6 items that I would like to interact with. My goal is to dynamically change ...

javascriptjquerycss

Troubleshooting Limitation Problem with Bootstrap Multiselect

I recently created a multiselect dropdown menu using Bootstrap Multiselect. I successfully set a limit on the number of options that can be selected (in this case, 5), and once the limit is reached, the additional options become disabled. Everything works ...

javascriptjqueryhtmlcsstwitter-bootstrap

Swap out the string variable when it is modified

To generate a string inside the "code" variable that combines the selected image values, the final code should appear similar to: "test1/A=1a/B=1b" or "test2/A=1b/B=1a", etc. If the user modifies icon "A," it should replace the value in the code instead of ...

javascriptjquerycsshtml

Experiencing unfamiliar typescript glitches while attempting to compile a turborepo initiative

I have been utilizing the turborepo-template for my project. Initially, everything was running smoothly until TypeScript suddenly started displaying peculiar errors. ../../packages/fork-me/src/client/star-me/star-me.tsx:19:4 nextjs-example:build: Type erro ...

node.jsreactjstypescriptnext.jsturborepo

Is there a way to change the fill color of an SVG circle using Thymeleaf?

I am struggling to change the background color of a circle in an SVG image on my HTML page using Thymeleaf. I attempted to use inline style tags, but it resulted in the circle's background color turning black. <svg id="svg" height="50" width=" ...

htmlcsssvgthymeleaf

Various settings in JQuery UI Slider

Does anyone know how to customize the steps in a jQuery UI slider? I want to set specific values as steps, like 0, 1200, 2000, 2200, and 3000. Any suggestions on how to achieve this? const rangeSliderInit = () => { const valueArray = [0, 400, 1000, 1 ...

javascriptjquerycssslider

Is it possible to apply a click effect to a specific child element of a parent using jQuery?

Struggling to figure out how to modify this jQuery code so that only the parent of the clicked button displays its child. Currently, all children are displayed when any button is clicked, not just the one within the targeted parent. I attempted using $(t ...

htmljquerycss

The inner div overflowing at 100% dimensions

I'm working with an outer DIV that has a CSS property of position: fixed to serve as an overlay. Inside this, I have another div set to 100% width with a margin of 30px to create the appearance of an inner border frame. Unfortunately, the right and bo ...

csshtml

Unable to access Vimeo video via embedded link - Link appears to be broken

I've embedded a responsive Vimeo video within a link, but the link is not functioning and does not show a cursor upon hovering. Any suggestions on what could be causing this issue? .container { position: relative; margin-bottom: 20px; max-width: ...

htmlcssvimeo-player

Entering text into the input field with the string "Foo"<[email protected]> is not functioning correctly

The text in my input is initially filled with this string "foo foo"<<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2920200f29202061263b">[email protected]</a>>. However, after an insert, the string now l ...

htmlcssinput

Tips for aligning elements vertically within a <td> tag

I am looking to vertically align 3 elements within my <td> tag, specifically in the center/middle. These are the elements I want to align: An image button (a tag) with a top arrow image A jQuery slider Another image button (a tag) with a bottom arr ...

htmlcss

Is it possible to create a button that can bring in a .css file?

Is there a way to create a button that imports styles from a .css file, or is it possible to change multiple CSS properties with buttons to create different website themes? This is the CSS file I have: .body { background-image: url("example.png"); } ...

javascriptjqueryhtmlcssbutton

generate a flexible div that adjusts its height based on the size of the browser window

Is it possible to create a div layout structured like this: <div_wrapper> <div_header> </div_header> <div_content> </div_content> </div_wrapper> Upon page load, the div_header o ...

csshtmldynamic

Preventing a sprite from going beyond the boundaries of a canvas with pure JavaScript - here's how!

I am in the process of developing a game using native JavaScript, HTML, and a touch of CSS. I have two blocks called Sprites that tend to keep moving off the canvas edges when they reach them. Question: How can I utilize native JS to prevent the sprites fr ...

javascripthtmlcsscanvas

Looking to implement server-side rendering with Next.js using [id].js in headless WordPress? Utilize GraphQL to fetch a single page from WordPress and create a service in the format of service/[id

I am currently working on a Next.js project that utilizes Apollo GraphQL to fetch data from the backend. My goal is to render the page using server-side rendering, but I am facing an issue with calling the backend within the getServerSideProps due to the ...

wordpressnext.jsheadless

Cancelling a lengthy external API request within a Vercel serverless function

My Vercel serverless function includes a request to an external API using node fetch. To prevent it from running for too long, I am planning to set a timeout of one second for aborting the external request if it exceeds this threshold. Do you think this i ...

apinext.jsserverlessvercel