Hello, I'm trying to include a css resource using the <code class="n

We do, it's on the ReadMe here: <a href="https://github.com/zeit/next.js#custom-docume

CSS in header about next.js HOT 4 CLOSED

vercel commented on April 29, 2024 19

CSS in header

from next.js.

Comments (4)

hugotox commented on April 29, 2024 2

really?? On every page?? We don't have a way to customize the html Next uses?

from next.js.

IanMitchell commented on April 29, 2024 2

We do, it's on the ReadMe here: https://github.com/zeit/next.js#custom-document

from next.js.

nkzawa commented on April 29, 2024

It seems that the flicker is a bug. It shouldn't happen :(

from next.js.

nodegin commented on April 29, 2024

I solved (probably?) the flicker bug by this method:

In your server side code:

api.get('/style', (req, res) => {
  res.send(`
    body {
      background: #eee;
      margin: 0;
    }
  `.replace(/\s{2,}/g, ''))
})

and in every of your pages:

static async getInitialProps ({ req }) {
  const isServer = !!req
  const host = isServer ? req.headers.host : location.origin
  const stylesheet = await (await fetch(host + '/api/style')).text()
  return {
    isServer,
    stylesheet,
  }
}

render () {
  return (
    <div>
      <Head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
        <style dangerouslySetInnerHTML={{ __html: this.props.stylesheet }} />
      </Head>
    </div>
  )
}

Maybe it's still flickering, but around 0ms so your eyes won't see that, since the head element is still being updated every page transition.

from next.js.

CSS in header about next.js HOT 4 CLOSED

Comments (4)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent