A custom Next script loader for Next.js. Replaces the built-in NextScript component and allows you to apply polyfill pre-loading and business logic.
npm install @engineerapart/nextscript

!David
!David
In each new version of Next there are incompatible changes with the prior versions. This component was always a stepping stone to a more permanent solution, which the Next.js team are now working on in the Module/Nomodule RFC and the corresponding initial merge request that went into Next.js 9.0.3.
Once that feature is enabled by default, this component will be deprecated.
This project is not-so-cleverly named after the export of the same name in the amazing Next.js framework.
This component provides a flexible, business-rule oriented approach to loading the scripts in your Next project. By default, Next loads all scripts on page load, which may or may not be desirable behavior. Some of the reasons you may want to avoid that are:
- Performance: Only load these scripts when needed, or wait until the page load event (for things like _error, if you know it is not needed immediately)
- Preloading: It is not uncommon to need to run a script - or load a script from URL - before allowing your Next app to load.
- Polyfill preloading: This is the most common application of the previous point. Next bundles some polyfills, but only the ones NEXT requires - not the ones YOU require. If you require IntersectionObserver for example, it is on you to load it yourself. Since that is a HUGE polyfill (7kb minzipped!), you do not want to deliver it to all clients - only the ones that absolutely require it (IE <= 11, Safari ALL).
This NextScript component allows you to accomplish these goals and more in a flexible, minimal way. This component itself compiles down to 2.3kb minzipped (although it is only ever executed on the server!) and has a simple API.
Built originally out of the NextScript component itself, all of that functionality is supported, in addition to the features above.
This component also retains and expands Next's support for nonces on script elements: Simply assign the nonce parameter and every script URL and every inline script will automatically get the nonce. This can be overridden on a per-script basis (can't imagine why you'd need to - but you can!).
will produce identical behavior to the component found in Next.``bash
npm i @engineerapart/nextscript
yarn add @engineerapart/nextscript
`
You will find an entry in NPM under nextscript. This is our placeholder to avoid confusion with potential package collisions and is not the published package.
#### Duplicate Next.js
The only difference between this example and the default Next _document is where NextScript is imported from:
`js
import { NextScript } from '@engineerapart/nextscript';
import Document, { Head, Main } from 'next/document';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
#### Preload polyfills
The canonical example: How to preload polyfills, including polyfills not defined by this project.
`js
import { NextScript, FeaturePolyfills } from '@engineerapart/nextscript';
import Document, { Head, Main } from 'next/document';const features = [
FeaturePolyfills.FETCH,
FeaturePolyfills.CUSTOMEVENT,
{
test:
('entries' in Array.prototype),
feature: 'Array.prototype.entries',
},
];export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
);
}
}
`
Polyfill Service
Current this component points to the Polyfill.io service, which serves ~150 million polyfill requests per DAY (4.5 billion/month!). However, eventually this project will also support pointing to your own self-hosted polyfill service, provided that it adheres to the Polyfill.io API (instructions for self-hosting the Polyfill.io service can be found in their repository.)
How it works
The default NextScript implementation captures the scripts generated by the Next build process and immediately renders them to