4

In my Next 10 application, I can import global styles in _app.js like so

import 'assets/css/app.css'

I'd like to add a print stylesheet. I know I can use a @media print { } query to app.css, but ideally it would be loaded as a separate file so the download priority is lower, e.g.

<link rel="stylesheet" href="/assets/css/print.css" media="print">

Is this possible using Next.js? I can't see any obvious way to control how the actual <link> tag is rendered.

The only way I can see this might work is to have a custom bit of Webpack/file-loader configuration that matches print.css only, which feels... less than ideal.

velvetkevorkian
  • 660
  • 1
  • 5
  • 13
  • Please show us the rest of your JSX code and your NextJS page render function. – Dai Mar 09 '22 at 07:55
  • You should be able to use `next/Head` and return a `` JSX element with that `` inside of it. See here: https://nextjs.org/docs/api-reference/next/head – Dai Mar 09 '22 at 07:57
  • Sure, but is there any way to get a link to that stylesheet via `import` other than putting it in the public folder? – velvetkevorkian Mar 09 '22 at 17:01
  • If it wasn’t in a public folder, how else would browsers be able to download it? – Dai Mar 09 '22 at 17:51
  • I'd like it to go through the same build process that the rest of the CSS files use, so it gets a hashed identifier for cacheability etc and ends up in the `_next/static/css` folder like the other stylesheets that get generated. – velvetkevorkian Mar 10 '22 at 09:12

2 Answers2

0

I have the same question as you velvetkevorkian but with the intend to use the following technique:

<link rel="stylesheet" href="webfonts.css" media="print" onload="this.media='all'" />

This will indeed lower the priority in the loading queue, prevent rendering from being blocked and finally replace the native fonts by the webfonts.

UPDATE: not ideal but for my "simple" CSS file (which only defines font-face) here is what I did:

  1. Move my webfonts.css file to the public folder
  2. Manually add my <link> inside <Head>
mass
  • 41
  • 4
0

Its possible, yes!

You can create Print.module.css in folder pages or anywhere, inside of this file you must use

@media print {
     /* its an example */
    .noPrint{
      display: none;
    }
}

Inside your file .js or .tsx you call this css like a

import print from './Print.module.css'

and call the className like:

className={print.noPrint}

if you have more stylesheets in your project you can differenciate like this:

import print from './Print.module.css'
import styles from './General.module.css'

and call the classes together, it goes like this:

className={`${styles.anyclass} ${print.anyclass}`}

this works too for responsive stylesheets, enough follow this logic with respectives media queries.

Leffa
  • 369
  • 4
  • 7
  • This won't output it as a separate stylesheet though will it? I'm looking for a separate link tag with media="print" on it. – velvetkevorkian Jan 27 '23 at 22:43
  • will generate yes with this my example, however you can use the same stylesheet, the core is in the CSS in the media query @media print {} – Leffa Jan 28 '23 at 13:45
  • 1
    Thanks, but as stated in the question "I know I can use a `@media print { }` query to app.css, but ideally it would be loaded as a separate file so the download priority is lower" – velvetkevorkian Jan 29 '23 at 18:28