[SOLVED] How to define the order of next/head elements in Nextjs

How to define the order of next/head elements in Nextjs

For CSS in my nextjs project I am using styled-jsx (https://github.com/vercel/styled-jsx).

All styled JSX tags (<style jsx>) will be appended at the end of the HTML <head> element.

However I have another native (non styled-jsx) HTML <style> tag that contains several CSS overrides. If I place my <style> tag in the nextjs <Head> component it will be placed in the HTML <head> element but above the other styled-jsx style tags. This will cause that the other styled-jsx <style jsx> tags will override my styles defined in my normal <style> tag. I want to achieve the other way around.

  import Head from 'next/head';
  <Head>
    <style dangerouslySetInnerHTML={{ __html: props.css }} />
  </Head>

I already tried to put my style tag outside of the <head> element but this is no option for me right now.

How can I put my native HTML <style> tag at the end of the HTML <head> element so other styles will be overridden?

Solution

If you are still looking for an answer:

My styles were overriden by styles like Bootstrap so I was also facing your problem.

In the end I decided to override the order in next/head by overriding next.js-Sourcecode.

This is the file you might need to override: https://github.com/vercel/next.js/blob/canary/packages/next/pages/_document.tsx

You have to move {head} down.

After some research I decided to use a npm-module named patch-package. https://www.npmjs.com/package/patch-package It's straight forward and allows you to create a patch for the nextjs-Sourcecode.