Next-i18next: Error: `pages/404` can not have getInitialProps/getServerSideProps
Describe the bug
After setting up next-i18next, I have the following error in the terminal on every page (probably because it's looking for an not existing favicon.ico by default).
``.bash
Error:pages/404` can not have getInitialProps/getServerSideProps, https://err.sh/zeit/next.js/404-get-initial-props
But my 404 page is really simple, no `getInitialProps/getServerSideProps`
```.404.js
export default () => <h1>This is the 404 page</h1>
Note: i'm trying the setup the project for a potential future translation. Therefore, next-i18next provides a clean way for developers to use the system as string dictionary for UI texts, which later on could be translated.
Obviously, if I go to /404, I see the error in browser.
Thank you!
Occurs in next-i18next version
From the package-lock.json and other info
- next-i18next: 4.2.1
- i18next: 19.3.4
- node JS: 13.9.0
- npm: 6.13.7
Steps to reproduce
File structure
└── public
└── static
└── locales
├── en
└── common.json
└── homepage.json
└── src
└── pages
└── components
In i18n.js
Note: I needed to add those properties in the config to be able to make t('key) working
lng: 'en',
fallbackLng: 'en',
languages: ['en', 'not-existing-yet'],
More specifically lng: 'en', the fallbackLng is for later if we do add more languages, and languages to be able to access i18n.languages (otherwise it wasn't working)
```.i18n.js
const NextI18Next = require('next-i18next').default
const NextI18NextInstance = new NextI18Next({
defaultLanguage: 'en',
lng: 'en',
fallbackLng: 'en',
languages: ['en', 'not-existing-yet'],
otherLanguages: ['not-existing-yet'],
})
module.exports = NextI18NextInstance;
In `_app.js`
```_app.js
import React from "react";
import App from "next/app";
// i18n
import { appWithTranslation } from '~/i18n'
class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
return (
<>
<Head>
<title>NextJS Advanced Routing</title>
</Head>
<Component {...pageProps} />
</>
);
}
}
export default appWithTranslation(MyApp);
In index.js (homepage)
```homepage.js
import { withTranslation } from '~/i18n'
const Index = ({ data, t, ...props }) => {
return (
{ t('homepage:title') }
)
}
Index.getInitialProps = async ({ query }) => {
// get some data
const data = await getData();
return { data, namespacesRequired: ['common', 'homepage'], }
}
export default withTranslation('homepage')(Index)
```
Expected behaviour
404 should be working without triggering an error
Screenshots
OS (please complete the following information)
- Device:MBP 2019 15"
- Browser: Chrome 80.0.3987.149
Additional context
Danetag
All 19 comments
Actually this Next's requirement is absurd, cause if you have translations you must translate your custom 404 as well.
felixmosh
on 20 Apr 2020
Yeah, @Danetag this is probably an issue to raise with the NextJs team. There's not much that can be done on the next-i18next side of things - we have to get translations _somehow_.
isaachinman
on 20 Apr 2020
Hello, you are right we should be able to translate the 404 page as well ! (great job on this repo btw)
Is it possible to disable the warning though ? Because all my other pages are correctly setup and I would like to avoid to be spamed by the warning when navigating to the 404 page.
Thank you !
RobinLebhar
on 13 Jun 2020
Just to follow up: I don't think it's right to disable the warning. I think the correct thing to do is translate our 404 pages.
I can speak to the NextJs team about this.
isaachinman
on 11 Jul 2020
Any updates?
arthruwelkin
on 21 Jul 2020
Yeah. I'm facing the same issue now. I like to keep my console clean. But in this particular situation I get or warning from Next.js You should have custom 404 page because it's good to optimize its as static content either warning from next-18next You have not declared a namespacesRequired array on your page-level component: Custom404.
Frustrating 😞
Dynkin
on 3 Aug 2020
@Dynkin, you can add your custom 404 page without the getInitialProps. Actually i'm running with this solution. it's not the best solution but it's working.
import PropTypes from 'prop-types';
import { withTranslation } from '../i18n';
function Custom404({ t }) {
return (
<div>
<h1>{t('title-message')}</h1>
</div>
);
}
Custom404.propTypes = {
t: PropTypes.func.isRequired,
};
export default withTranslation('404')(Custom404);
anthonyrenard
on 20 Aug 2020
@Dynkin, you can add your custom 404 page without the getInitialProps. Actually i'm running with this solution. it's not the best solution but it's working.
import PropTypes from 'prop-types'; import { withTranslation } from '../i18n'; function Custom404({ t }) { return ( <div> <h1>{t('title-message')}</h1> </div> ); } Custom404.propTypes = { t: PropTypes.func.isRequired, }; export default withTranslation('404')(Custom404);
I still see the error @anthonyrenard
geryit
on 26 Aug 2020
@Dynkin, I'm also still seeing the error if I use your method!
Kerim-Willem
on 26 Aug 2020
I tried default props instead of getInitialProps but it did not get the message away
slava-lu
on 30 Aug 2020
Any updates on this? 👀
kefimochi
on 1 Sep 2020
I haven't heard any updates from the Vercel team. Not much to be done in user land.
isaachinman
on 7 Sep 2020
Feature request opened at https://github.com/vercel/next.js/issues/17004
allan2
on 11 Sep 2020
New to next.js and currently fiddling around to solve the same problem.
I noticed, that if I don't have a 404.js page, it will fallback to the _error.js page to display the 404 Error and inside _error.js it is possible to use "getInitialProps".
I am using that for now as a workaround. It solves the translation problem, but it does cause another warning:
"You have added a custom /_error page without a custom /404 page. This prevents the 404 page from being auto statically optimized."
mimimimichael
on 22 Oct 2020
The same problem is happening to me, it without getInitialProps but it doesn't work.
apt-exploit
on 28 Oct 2020
Ok, so basically we're getting errors having and not having getInitialProps. Any workarounds for getting rid of those errors?
morjanmihail
on 23 Nov 2020
Any updates for this? Seems crazy to not be able to translate 404s...
CalebLovell
on 12 Feb 2021
@CalebLovell As next-i18next@beta supports other data-fetching methods, this should no longer be an issue. See #869.
isaachinman
on 12 Feb 2021
This is now possible with [email protected], by using getServerSideProps on your custom error page.
isaachinman
on 24 Feb 2021
Related issues
slava-lu
·
6Comments
chayakornwc
·
6Comments
Jonesus
·
6Comments
ronfogel
·
3Comments
isaachinman
·
7Comments
Most helpful comment
Just to follow up: I don't think it's right to disable the warning. I think the correct thing to do is translate our 404 pages.
I can speak to the NextJs team about this.