!David
!David

Version Notice

* For Next <= v6, please use nextscript@~0.0.8
* For Next >= 7, please use nextscript@^1.0.0
* For Next 8 & 9, please use nextscript@^2.0.0
* For Next >= 9.0.3 and above, if using experimental module support for modern browsers, this package is not needed (see: 9.0.3 release notes). This is due to the fact that all polyfills offered by polyfill.io are already supported by modern browsers.

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.

NextScript 💠

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.

Motivation

Take a look at this issue on the Next.js repository. This is a common problem and sometimes it is not clear how to resolve it. This component gives you a seamless, drop-in way to handle polyfills that is performant and efficient, only delivering what is needed to each browser.

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!).

Opt-In

This component's functionality is opt-in. You can configure the component to behave exactly as NextScript itself does, or you can optionally enable the above features. Simply rendering will produce identical behavior to the component found in Next.

Getting started

Install from npm:

``bash
npm i @engineerapart/nextscript

or

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.




Examples

#### 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