In my NextJS app, I have the need for javascript to run as soon as the HTML markup is hydrated (specifically before the first contentful paint).
I know that I can inline a <script>
tag like this and get my code to run as soon as the browser parses the DOM:
// In app.tsx
<div
dangerouslySetInnerHTML={{
__html: `<script type="text/javascript">console.log('hello');</script>`,
}}
/>
Thats cute, but the actual code is a little more complex and would benefit from being separated into a few files.
Is there any way to define a separate entrypoint bundle to inline with NextJS? Or do I need to compile it myself and use a webpack replace plugin to swap it in after the build completes?
<div
dangerouslySetInnerHTML={{
__html: `<script type="text/javascript">__ENTRYPOINT_2_BUNDLE__</script>`,
}}
/>
If I could make up my own API, it might look like this:
<Script type="inline-bundle" entrypoint="/bundles/ssr/index.js" />