I am using NextJS to product SSR pages, and these pages are language-specific. I would like to set the lang property to declare the language of the text.
So far I have:
import Document, { Html, Head, Main, NextScript } from "next/document"
import Router from "next/router"
class MyDocument extends Document {
render() {
const { lanaguage } = Router.router.query
return (
<Html lang={language}>
<Head />
<body className="antialiased text-white text-base font-sans">
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
However, Router.router is always null when using a Custom Document (_document.js). Is there another way to get the URL params/query when using a Custom Document?
I have been able to solve this by using:
import Document, { Html, Head, Main, NextScript } from "next/document"
class MyDocument extends Document {
render() {
const { lanaguage } = this.props.__NEXT_DATA__.query
return (
<Html lang={lanaguage}>
<Head />
<body className="antialiased text-white text-base font-sans">
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
I am unsure if it is bad practice to use this.props.__NEXT_DATA__. However, it does have the information I require.
Since Next.js v10, if you're using the built-in i18n routing, Next will automatically set the lang attribute of the document.
From the documentation:
Since Next.js knows what language the user is visiting it will
automatically add the lang attribute to the <html> tag.
Next.js doesn't know about variants of a page so it's up to you to add
the hreflang meta tags using next/head. You can learn more about
hreflang in the Google Webmasters documentation.
Related
I am working with next.js and everything seems to be fine when I am using app with npm run dev.
But when I am exporting my next.js app to a static files with command npm run build and trying to open my project for part of the second the screen is unstyled, this cause verry bad user experience.
I know this is called FOUC but how to avoid it on next.js static export?
P.S I am using styled-components library, not sure if that affecting the final result.
If you are using styled-components, I would look into modifying your _document.js file per these instructions: https://styled-components.com/docs/advanced#server-side-rendering
That's how I managed to get out FOUC after trying a bunch of random stuff like:
putting a loader
putting a <script>0</script> tag
etc..
Long shot that this is a fix for anyone else, but I saw this behavior when I mistakenly wrapped the entire page contents inside the head tag. Heh, oops.
So don't override Document with something like this like I did, make sure to close that head tag sooner:
<Html lang="en">
<Head>
<body>
<Main />
<NextScript />
</body>
</Head>
</Html>
For anyone facing this annoying problem using styled-component, I solved it by referring to this and this to render your styling on the server side before your page loads. Hope this helps someone end their frustration
import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: [initialProps.styles, sheet.getStyleElement()],
};
} finally {
sheet.seal();
}
}
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
Next.js v11 released a new Script component which has different strategies.
It is recommended to load Google TagManager with afterInteractive strategy.
I've tried
// _app.js
import Script from 'next/script';
class MyApp extends App {
public render() {
const { Component, pageProps } = this.props;
return (
<>
<Script strategy="afterInteractive">
{`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':` +
`new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],` +
`j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=` +
`'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);` +
`})(window,document,'script','dataLayer','GTM-XXXXXXX');`}
</Script>
<Component {...pageProps} />
</>
);
}
}
export default MyApp;
It works fine, it loads google tag manager, but the problem is that it injects the same script on every page nav, which makes duplicate tags.
How to utilize the new Script component?
You must set an id to your <Script> component because it has inline content (no src attribute).
Next can check if it has been already rendered or not and you will not have these duplications.
This is the eslint rule associated from Next :
next/script components with inline content require an id attribute to be defined to track and optimize the script.
See: https://nextjs.org/docs/messages/inline-script-id
So your solution could be :
<Script id="gtm-script" strategy="afterInteractive">{`...`}</Script>
You should probably also install eslint for your next project :
Either run next lint or install eslint next config :
yarn add -D eslint eslint-config-next
and define the file .eslintrc.json with this content at least :
{
"extends": ["next/core-web-vitals"]
}
Information about next.js eslint configuration.
My final solution was to break apart the GTM script.
Putting the initial dataLayer object on the window in _document page.
// _document.js
import Document, { Head, Html, Main, NextScript } from 'next/document';
export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
<meta charSet="utf-8" />
<script
dangerouslySetInnerHTML={{
__html:
`(function(w,l){` +
`w[l] = w[l] || [];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});` +
`})(window,'dataLayer');`,
}}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
Loading the GMT script with Script component (which is not allowed to be used in the _document page)
// _app.js
import Script from 'next/script';
class MyApp extends App {
public render() {
const { Component, pageProps } = this.props;
return (
<>
<Script src={`https://www.googletagmanager.com/gtm.js?id=GMT-XXXXXXX`} />
<Component {...pageProps} />
</>
);
}
}
export default MyApp;
Your inline scripts require an "id" parameter, so that Next can internally check and avoid loading the scripts again.
The documentation mentioned it but they missed this in the first release.
It was later added as a patch so upgrading your Next would solve this issue
Patch - https://github.com/vercel/next.js/pull/28779/files/11cdc1d28e76c78a140d9abd2e2fb10fc2030b82
Discussion Thread - https://github.com/vercel/next.js/pull/28779
I've only just started looking at Next JS for my project but am having issues with the Head tag not working. According to the documentation, I should just be able to import head from next/head and insert the title tag. However, it's not working for me, be it using the Layout component which gets imported to each page or directly injecting it.
Here is the code as a layout (/components/layout.jsx)
import Link from 'next/link';
import Head from 'next/head';
export default function Layout({
children,
title = 'Default Title'
}) {
return(
<div>
<Head>
<title>{title}</title>
<meta charSet='utf-8' />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"></link>
</Head>
<nav>
<div className='nav-wrapper'>
<ul class='right hide-on-med-and-down'>
<li>
<Link href='/'>
<a>Home</a>
</Link>
</li>
<li>
<Link href='/about'>
<a>About</a>
</Link>
</li>
</ul>
</div>
</nav>
{children}
{/* Footer to go in here */}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</div>
)
}
And this is the about page (/pages/about.jsx)
import React from 'react';
import Layout from '../components/layouts';
function About() {
return(
<Layout>
<div>
<h1>Test Page</h1>
</div>
</Layout>
);
}
export default About;
It just doesn't work at all. The title is not updated and if I inspect the components, I can't see anything that I've added. I originally thought that it's because I set up the Next app myself and I did something wrong. However, I tried bootstrapping it with npx create-next-app and I am seeing the same issue.
Any help is appreciated!
Cheers
First, create a new component, eg. seo.jsx
import Head from "next/head";
const SEO = ({ pageTitle, pageDescription }) => (
<Head>
<title>{pageTitle}</title>
<meta name="description" content={pageDescription} />
...
</Head>
);
export default SEO;
Second, import to your page (eg. home.jsx):
import SEO from "#components/seo"; //change to your path
const Home = () => {
...
return (
<div>
<SEO pageTitle="Homepage" pageDescription="Welcome to my website" />
...
</div>
);
};
export default Home;
In this scenario you will be able to change title and description (or any other props you need) in any page of your app, without worrying about meta key duplicates.
More info here.
I took your exact code and created a sandbox and I can see the title working as expected provided you use .jsx in your import
import Layout from '../components/layouts';
to
import Layout from '../components/layouts.jsx';
or if you want to use without extension, use .js instead
**Code Sandbox - ** https://codesandbox.io/s/vigorous-wind-4e035?file=/pages/index.js
Next JS Discussion - https://github.com/vercel/next.js/issues/2391#issuecomment-311735189
I didn't do anything specific to the title but to make the sandbox work and to print the document title.
I modified paths without the folder and the default IndexPage next sandbox
Modified Index to print the document title
Instead of importing components/layout, imported components/layout.jsx
The Codesandbox crashed when i tried to import the file without the JSX extension.
Let me know if this helps or we can explore further!
I also got that the head tag is not a working issue, what I did was added a tag for cover and the layout of the body
ex:
<main>
<head>
{..head elements }
</head>
<div>
{ other elements }
<div>
</main>
I'm a total React newbie and I guess there is something fundamental I don't quite understand here. A default Gatsby page looks like this. Is there a way to use a local .js file somewhat like this?
<script src="../script/script.js"></script>
What I would like to achieve is to have react ignore script.js but still have the client side use it. A default Gatsby page looks like this, is it possible to do somerthing like that there?
import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
const IndexPage = () => (
<Layout>
<SEO title="Home" keywords={[`gatsby`, `application`, `react`]} />
<h1>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
<Image />
</div>
<Link to="/page-2/">Go to page 2</Link>
</Layout>
)
After several hours of frustration I finally stumbled upon discussion on GitHub that solved this for me. In Gatsby, there is a thing called static folder, for which one use case is including a small script outside of the bundled code.
Anyone else in the same situation, try proceeding as follows:
Create a folder static to the root of your project.
Put your script script.js in the folder static.
Include the script in your react dom with react-helmet.
So in the case of the code I posted in my original question, for instance:
import React from "react"
import Helmet from "react-helmet"
import { withPrefix, Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
const IndexPage = () => (
<Layout>
<Helmet>
<script src={withPrefix('script.js')} type="text/javascript" />
</Helmet>
<SEO title="Home" keywords={[`gatsby`, `application`, `react`]} />
<h1>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
<Image />
</div>
<Link to="/page-2/">Go to page 2</Link>
</Layout>
)
Notice the imports
import Helmet from "react-helmet"
import { withPrefix, Link } from "gatsby"
and the script element.
<Helmet>
<script src={withPrefix('script.js')} type="text/javascript" />
</Helmet>
This would have saved hours of my time, hopefully this does it for someone else.
There are many ways to add scripts in GatsbyJS...
To execute a script on a specific page
create a stateless ScriptComponent.js file and place it inside your /src folder.
in your ScriptComponent.js use require() to execute the script inside useEffect() like this:
const ScriptComponent = ({
src, // if internal,put a path relative to this component
onScriptLoad = () => {}, // cb
appendToHead = false,
timeoutDuration = 10,
defer = false,
isExternal = false,
}) => {
useEffect(() => {
setTimeout(() => {
if (isExternal) {
const script = document.createElement('script');
script.src = src;
script.onload = onScriptLoad;
defer
? script.defer = true
: script.async = true;
appendToHead
? document.head.appendChild(script)
: document.body.appendChild(script);
} else { // for internal scripts
// This runs the script
const myScript = require(src);
}
}, timeoutDuration);
}, []);
return null;
};
To run it on client-side, you could check the window object inside your script.js file if you didn't run it in useEffect:
if(typeof window !== 'undefined' && window.document) {
// Your script here...
}
finally, go to the page you want to execute the script in it (e.g. /pages/myPage.js ), and add the component <ScriptComponent />
If you want to execute a script globally in (every component/page) you could use the html.js file.
first, you'll have to extract the file (in case you didn't) by running:
cp .cache/default-html.js src/html.js
inside your html.js file:
<script dangerouslySetInnerHTML= {{ __html:`
// your script here...
// or you could also reuse the same approach as in useEffect above
`}} />
Just create gatsby-ssr.js file on root folder
and add the following pattern for your scripts folder
import React from 'react'
export const onRenderBody = ({ setPostBodyComponents }) => {
setPostBodyComponents([
<script
key="https://code.jquery.com/jquery-3.2.1.slim.min.js"
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossOrigin="anonymous"
defer
/>,
<script
key="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossOrigin="anonymous"
defer
/>,
<script
key="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossOrigin="anonymous"
defer
/>
])
}
Then, you at the end of dom you'll see the links to scripts
If you'd like to use a Gatsby plugin, which to me is no different from using an external library like Helmet (plugins are npm packages after all), you could use gatsby-plugin-load-script.
You can provide either the url to the src attribute or a local path. If you're going to store your JS in a local file such as some-minified-js.min.js - make sure to store in the static directory at the root of your project.
Once you do this, you can access via the global object:
global.<object or func name here>
For example, I was trying to include a very small JS library via a minified file, so I stored the file in /static/my-minified-library.min.js and then:
Installed the plugin: npm i --save gatsby-plugin-load-script
Added this to my gatsby-config.js
plugins: [
{
resolve: "gatsby-plugin-load-script",
options: {
src: "/my-minified-library.min.js",
},
},
],
Accessed in my react component like so:
useEffect(() => {
const x = new global.MyImportedLibraryObject();
}, []}
Gatsby uses html.js in the src folder. Not index.html like most react projects.
Example html.js file:
import React from "react"
import PropTypes from "prop-types"
export default class HTML extends React.Component {
render() {
return (
<html {...this.props.htmlAttributes}>
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
{this.props.headComponents}
</head>
<body {...this.props.bodyAttributes}>
{this.props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: this.props.body }}
/>
{this.props.postBodyComponents}
</body>
</html>
)
}
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
}
For adding custom Javascript using dangerouslySetInnerHTML inside src/html.js:
<script
dangerouslySetInnerHTML={{
__html: `
var name = 'world';
console.log('Hello ' + name);
`,
}}
/>
You can try adding your js there but, note that your js may not work as expected. You can always look into react-helmet for more dynamic apps and adding scripts to <head>.
Gatsby Documentation: https://www.gatsbyjs.org/docs/custom-html/
You can do this very easily with the Gatsby plugin "gatsby-plugin-load-script."
Simply do this:
Create a folder named static at the root of your gatsby app
Place your script in it
Add the following configuration in gatsby-config.js
{
resolve: 'gatsby-plugin-load-script',
options: {
src: '/test-script.js', // Change to the script filename
},
},
I'm not sure if anyone still needs this answer, but here it goes:
The answer by Elliot Marques is excellent. If you need it for a local file, upload the script to Github and use a service like JSDelivr. It saves a lot of time and stress.
React works with dynamic DOM. But for rendering it by browser, your web server should send a static index page, where React will be included as another script tag.
So, take a look on your index.html page, which you can find in public folder. There you could insert your script tag in the header section, for example.
Obviously, that's not an easy task, as the only thing that changes in the html.js template file by default are the head meta tags and the content.
The meta tags are handled by the Helmet component ({head.title.toComponent()} and {head.meta.toComponent()}) and the HTML changes inside the template are managed by React. (<div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />)
The body tag however is outside the scope of React, which is why I can't figure out how to change it on-the-fly when I navigate from page to page. That's exactly what I'd need though as I wanna apply a different body background to each page.
I know that I could solve this by using the exports.onRouteUpdate in gatsby-browser.js, but I would like the class to be present even if JS is disabled in the browser. Means I'd like it to be there even if I export without the bundle.js file, just generating the static site HTML.
React-helmet now supports adding attributes to body element as well.
So, if you want to add a class to a specific component/page, you can do something like this:
import Helmet from 'react-helmet'
// Inside your component
<Helmet
bodyAttributes={{
class: 'new-class-for-body'
}}
/>
// or
<Helmet>
<body className="new-class-for-body" />
</Helmet>
It does look like react-helmet supports dynamically/statically setting a class on the <html> element.
They don't want to support setting classes on the body though... https://github.com/nfl/react-helmet/issues/182
If you really need to support body classes, then this module does something very similar to react-helmet but for body classes https://github.com/iest/react-body-classname
February 2023:
Since the release of gatsby#5.5.0, the preferred way of doing this is using the Gatsby Head API. (The gatsby-plugin-react-helmet plugin has been deprecated.)
In your page file, export a <Head> component with a <body className /> element inside:
export const Head = () => <body className="your-class-name" />
You can also do this alongside other <Head> changes, e.g.:
export const Head = () => (
<>
<html lang="en" />
<title>Hello World</title>
<meta name="description" content="Hello World" />
<body className="home-page" />
</>
)