Global style tags in Next.js prevent Clerk styles from loading during CSR

[x] Review the documentation: https://docs.clerk.com/
[x] Search for existing issues: https://github.com/clerkinc/javascript/issues
[x] Go through package changelog files.
[ ] Provide the Frontend API key from your application dashboard.

Package + Version

[ ] @clerk/clerk-js
[ ] @clerk/clerk-react
[x] @clerk/nextjs
[ ] @clerk/remix
[ ] @clerk/types
[ ] @clerk/themes
[ ] @clerk/localizations
[ ] @clerk/clerk-expo
[ ] @clerk/backend
[ ] @clerk/clerk-sdk-node
[ ] @clerk/shared
[ ] @clerk/fastify
[ ] @clerk/chrome-extension
[ ] gatsby-plugin-clerk
[ ] build/tooling/chore
[ ] other:

Dependencies + versions

Provide a json with the dependencies used in your project (copy paste from yarn.lock / package-lock.json) or a github project / template that reproduces the issue.

*Include the @clerk/ packages and their versions!**

Example:

{  
  "dependencies": {
    "react": "18.2.0"
  },
  "devDependencies": {
    "@clerk/nextjs": "^4.11.0",
    "next": "^13.1.6",
  },
  "peerDependencies": {
    "react": "18.2.0"
  }
}

Browser/OS

If applicable e.g. Chrome {version}, Node {version} , Bun {version} , Cloudflare worker {version}

Description

Describe your issue in detail, a demo repository or a sandbox would be great.

Adding a global style tag within _app.tsx will prevent clerk styles from loading during client side rendering. Server side rendering seems unaffected.

To reproduce:

Clone the nextjs starter repo https://github.com/clerkinc/clerk-nextjs-starter.git and install dependencies
Add your clerk .env variables

Update _app.js to include a global style tag:

  <Head>
   ...
    <style jsx global>{`
      html {
        height: 100%;
      }
    `}</style>
     ...
  </Head>

Reload the app
Navigate to the /sign-in page. Click the "Sign up" link to the /sign-up page. Clerk styles will not be applied. Refreshing the page will render the component with the correct styles

clerk / javascript