Tailwind Embedded Stylesheets for SSR and Static Pages #5973

BrianHung · 2021-03-12T00:28:49Z

BrianHung
Mar 12, 2021

I am trying to embed tailwind and global css within the head elements across SSR and static pages with the following custom _document.tsx:

import Document, { Html, Head, Main, NextScript } from 'next/document'
import type { DocumentContext } from 'next/document'
import * as fs from 'fs'
import * as path from 'path'

export default class CustomDocument extends Document {

  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx)
    return initialProps
  }

  render() {
    return (
      <Html lang="en">
        <InlineStylesHead />
        <body>
          <Main/>
          <NextScript/>
        </body>
      </Html>
    )
  }
}


class InlineStylesHead extends Head {

  getCssLinks({allFiles: files}) {
    const { assetPrefix } = this.context
    if (!files || files.length === 0) { return null; }

    return files
      .filter((file: string) => /\.css$/.test(file))
      .map((file: string) => (
        <style
          key={file}
          nonce={this.props.nonce}
          data-href={`${assetPrefix}/_next/${file}`}
          dangerouslySetInnerHTML={{
            __html: fs.readFileSync(path.join('.next', file), 'utf-8'), // ISSUE STARTS HERE
          }}
        />
      ));
  }

}

This works locally with next.js with npm run build and npm run serve, but does not work when the project is deployed onto vercel.

The issue is a disparity of where the static/css files are located between local and on vercel.

On local, the files can be found at .next/static/css for both SSR and pre-rendered pages.
While on vercel, the files are found at _next/static/css for SSR pages and found at .next/static/css for pre-rendered pages (like 404 which doesn't require getInitialProps).

The result on vercel is using path.join('.next', file) will allow for the project to be successfully built, but fail on a request for a SSR page (because it's no longer .next but _next). And using path.join('_next', file) causes the build to fail, because for pre-rendered pages done on the server, the _next directory isn't available created and copied over from .next/static yet.

Is there a way to configure vercel to serve .next/static under .next instead of _next?

BrianHung · 2021-03-12T04:16:21Z

BrianHung
Mar 12, 2021
Author

A little bit of internet sleuthing got me this tweet: https://twitter.com/hdjirdeh/status/1369709676271726599

npm i -D critters

// next.config.js
experimental: { optimizeCss: true },

Functionally it seems work :) but I would like more documentation on this + TailwindCSS

20:10:49.637 | Inlined 4.94 kB (17% of original 28 kB) of _next/static/css/20cc05be30588351dd1a.css.
-- | --
20:10:49.643 | Inlined 410 B (21% of original 1.9 kB) of _next/static/css/514d9241f5ccdab8ef6b.css.
20:10:49.643 | Time 96.006324
20:10:49.663 | Inlined 4.94 kB (17% of original 28 kB) of _next/static/css/20cc05be30588351dd1a.css.
20:10:49.668 | Inlined 410 B (21% of original 1.9 kB) of _next/static/css/514d9241f5ccdab8ef6b.css.
20:10:49.668 | Time 90.733717
20:10:49.690 | Inlined 4.94 kB (17% of original 28 kB) of _next/static/css/20cc05be30588351dd1a.css.
20:10:49.694 | Inlined 410 B (21% of original 1.9 kB) of _next/static/css/514d9241f5ccdab8ef6b.css.

1 reply

vasujhawar Feb 19, 2024

Do this still works, and where can we see these logs or compare the before and after inlined css?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tailwind Embedded Stylesheets for SSR and Static Pages #5973

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Tailwind Embedded Stylesheets for SSR and Static Pages #5973

BrianHung Mar 12, 2021

Replies: 1 comment · 1 reply

BrianHung Mar 12, 2021 Author

vasujhawar Feb 19, 2024

BrianHung
Mar 12, 2021

Replies: 1 comment 1 reply

BrianHung
Mar 12, 2021
Author