Question:
Originally I was considering to use <Head> to load a polyfill if a specific component configured in a specific way.
Is there a way to say to inject a script to be included with the <NextScript /> block from within another component. The same way that we include a script within the head.
An example -
I built a image component that can also be a responsive image using srcset and sizes. I want to include the picturefill.min.js library if either of these attributes are not undefined.
khrome83
All 6 comments
If you are looking for this, that's possible:
export default class extends Document {
render() {
return (
<html>
<Head />
<body>
<Main />
<NextScript />
<script src="your location" />
</body>
</html>
);
}
}
arunoda
on 14 Feb 2017
No. I mean by including a script tag in a component and having next inject it below next script.
The layout or document could be used for multiple pages, so I only want the script attached if the component using that script is rendered.
On Feb 13, 2017, 8:55 PM -0600, Arunoda Susiripala notifications@github.com, wrote:
>
If you are looking for this, that's possible:
export default class extends Document { render() { return (
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub (https://github.com/zeit/next.js/issues/1105#issuecomment-279593177), or mute the thread (https://github.com/notifications/unsubscribe-auth/ABwmA1u1RzB5EA6TO_XpNdcmvUhV9iIzks5rcRe6gaJpZM4L_MXl).
khrome83
on 14 Feb 2017
@khrome83 Normally react don't allow you to use script tags.
But you could use a NPM module like this: https://www.npmjs.com/package/load-script
Then it loads after NextScripts for sure.
arunoda
on 14 Feb 2017
Understood. I guess in my mind I was thinking of something along the lines of how we use <HEAD>
import ScriptRender from 'next/something';
function Comonent() {
return (
....
some unique functionality goes here that requires special outside library
examples - D3.js, Chart.js, PictureFill
....
<ScriptRender key="d3">
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.js" integrity="sha256-uttYJd+gaT1hgbYhYhGbIeFa1yK6JRnE6TVRZXroqIM=" crossorigin="anonymous"></script>
</ScriptRender>
);
}
export default Component;
Then in the _document.js
import Document, { Main, NextScript, RenderScripts } from 'next/document';
export default class MyDocument extends Document {
static async getInitialProps({ renderPage }) {
const page = renderPage();
return { ...page };
}
render() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="robots" content="index, follow" />
<meta name="author" content="SomeSite" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>
<body>
<Main />
<NextScript />
<RenderScripts />
</body>
</html>
);
}
}
Thoughts?
The idea is that if I have 20 pages, and I am using something on two of those pages. I should only have the _document.js render that outside resource if it is needed on that page. The key would identity it making sure it does not re-render and replace it.
khrome83
on 17 Feb 2017
@khrome83 something like ScriptRender can be build without any help from Next.js. Since this is not something every app needs, we won't be having something like this in the core.
Check these solutions: https://goo.gl/Z1Dxsq
arunoda
on 20 Feb 2017
@arunoda - sorry i just saw this very late. If you have time, would you be able to link the solution you were trying to share. The tiny google url apparently timed out.
khrome83
on 3 Jun 2017
Related issues
flybayer
·
3Comments
formula349
·
3Comments
rauchg
·
3Comments
timneutkens
·
3Comments
jesselee34
·
3Comments
Most helpful comment
@arunoda - sorry i just saw this very late. If you have time, would you be able to link the solution you were trying to share. The tiny google url apparently timed out.