-
Notifications
You must be signed in to change notification settings - Fork 26.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
i18n with next export calls getStaticProps for each defined lang, but then errors #18318
Comments
Hi, as mentioned in the initial RFC I'm going to close this since this is the expected behavior currently |
@ijjk sorry I'm a bit confused, the documentation suggests that it's supported here: https://nextjs.org/docs/advanced-features/i18n-routing#how-does-this-work-with-static-generation (if I'm not mistaken)... but I run into the same issue running |
I'm also very confused. Both the docs and RFC suggest SSG support for i18n, and the SSG functions seem to support it on the surface (exposing locale in the context params) but not during export. This looks like a valid bug to me. |
It's supported in the hybrid approach which the majority of Next.js applications uses. We can investigate adding |
Will try to reach out, but it is definitely an important feature since we need to deploy static websites to client managed infrastructure (S3 or hosting provider, which usually cannot support the hybrid approach, they usually serve static files) |
@timneutkens that's a shame. Is there any kind of roadmap/timeline for adding full SSG support for i18n (even if it's with language detection not supported)? Perhaps it's worth updating the documentation to reflect the current level of support, because it definitely looks like it's supported in the link above. On a side note, I think this feature and the other new ones in Next.js 10 are totally awesome! Keep up the good work. |
@caribou-code I did a quick investigation and it seems to be possible (but requires manual work, probably have to depend on a fork)... Then running
you need run the following commands
then serving the UPDATE: |
You're welcome to PR support for it to |
@kylekirkby it definitely doesn't. I too got lost optimizing an existing website for i18n support, just to encounter that I cannot statically generate the pages. I'll continue investigating, and will report here if I find some solution. |
Have you find some solution? I run into same issue, need to export static next page with locales.. :( |
This is really disappointing. Is there any workaround for using i18n with SSG in next? |
@ListeH sadly no. Time was an issue, so I temporarily deployed the i18n version to Vercel (on the free tier) and reconfigured the domain DNS entries. Hopefully, I will get back at it soon. |
- use getStaticProps instead of getInitialprops - use getStaticPaths instead of exportPathMap - knowned issue does not work with next export vercel/next.js#18318
This comment has been minimized.
This comment has been minimized.
I'm getting the same error and there is a lot of people who have the same issue. It would be great to open this issue and take a look on it, because there is a lot of people that want to deploy their Next.js app using a non-Vercel CDN. |
I was using static export to run nextjs app in capacitor project (hybrid app) and it worked well, but now it seems I cannot add i18n if next export won't work, 🤔 |
Is there any plan on adding i18n support with export? |
we also have this issue.. tried the workaround.. it isnt working.. please help |
We are also facing this issue, did any one find a way to make localized pages be exported? we only need this on our mobile app that currently uses capacitor, so exporting localized pages would be important for us |
I face this issue when I use next.js with https://github.com/isaachinman/next-i18next which is compatible with SSR. Is there any workaround for this error? |
exporting i18n in next includes a big issues, but we couldn't any right solution for a long time. |
Also with the same i18n issue with export, quite disapointing, I thought Next.js was a nice alternative for small static sites, after a couple weeks of building my site I find that I cannot use the export option and the need to setup a node server. Seems like you want devs to go into Vercel one way or the other. Next time I'll give Nuxt a try. |
@ijjk @timneutkens SSG with i18n needs to be in the roadmap if it isn't already. This issue is blocking us from using or recommending NextJS as the framework of choice for statically hosted applications requiring i18n. |
SSG with i18n is a must indeed, for me to continue using nextjs. |
Can't believe this is not possible... Any new workaround for this? Or is it literally not possible to have a statically hosted multilanguage website when using next and i18n? |
I spent the day implementing i18n support in a project. Everything worked great during development. At the end of the day I went to generate the static files |
I don't think anyone is limited to using the Vercel platform. Ultimately a Next.js project will either output static HTML files (which can be hosted anywhere, including an AWS S3 bucket for example) or it will require a running server (could be an AWS EC2 instance for example). The benefit of Vercel is it covers a lot of the hard work of doing the build and deployment correctly for you, and it handles the server-side stuff with Lambda@Edge functions, which is faster and cheaper to run. The issue in this particular case is that |
The problem is larger scale than this. What is the i18n option?
But then there are plugins like next-i18next and next-translate
So what you actually want to do is ignore all the next plugins and the i18n routing option.
And in the export async function getStaticPaths() {
const paths = [];
for (const product of await somehowFetch('products')) {
for (const locale of ['en', 'de']) {
paths.push({params: {locale, id: product.id}})
}
}
return {paths, fallback: false};
}
export async function getStaticProps({params: {id, locale}}) {
const product = await somehowFetch(`product ${id}`);
const translations = JSON.parse(await readFile(`translations.${locale}.json`));
return {
props: {product, translations, locale, locales: ['en', 'de']}
};
} And then you can decide if you need additional translation libraries like i18next or if you decide to just run |
As @Nemo64 said, dynamic routing can be used to export static pages. I have a demo that uses react-i18next. https://github.com/myWsq/nextjs-static-i18n import { StaticI18nLink } from "../i18n-browser";
import { useTranslation } from "react-i18next";
const Layout: React.FunctionComponent = ({ children }) => {
const { t } = useTranslation("common");
return (
<>
<nav>
<StaticI18nLink href="/">{t("home")}</StaticI18nLink>{" "}
<StaticI18nLink href="/about">{t("about")}</StaticI18nLink>
</nav>
<main>{children}</main>
<footer>
<li>
<StaticI18nLink locale="zh">简体中文</StaticI18nLink>
</li>
<li>
<StaticI18nLink locale="en">English</StaticI18nLink>
</li>
</footer>
</>
);
};
export default Layout; I've wrapped It also supports setting the basePath, and here is a deployment on Github Pages. |
@Nemo64 have you ever thought about creating a (static-)next-i18next module or trying to contribute to https://github.com/isaachinman/next-i18next to check if there's a possibility to offer your way as an alternative option? |
I haven't, and I don't think there is much an external package can do.
Those are the use cases I know of. Most needed improvements are within next here:
And I don't work long enough with next to address those. |
all ok, I have tried to change the next-i18next example to work with your approach: i18next/next-i18next#1202 (comment) |
I’ve just responded to the Vercel support with this (sharing this here mostly to inform you peeps about my implementation suggestion):
|
@herrherrmann this works also with next-i18next 😉 https://github.com/adrai/next-static-i18n-test and this simpler example: https://github.com/adrai/next-i18next-static-example with a new language-detector module: https://github.com/adrai/next-language-detector/tree/main/example |
How are we going to host this in netlify? |
Could someone who has a local fork of Next try changing: https://github.com/vercel/next.js/blob/canary/packages/next/export/index.ts#L333 to That is, force a user using next export to opt out of localeDetection (i.e. we know we're opting out of locale cookie / server redirects / domains) that it works? Do we run into the issue mentioned above? Perhaps we can re-write how the server and router code behaves so we can get this working. Anyone know the code intimately enough to try this? This doesn't feel like it should be too hard. The initial i18n routing PR isn't that big. |
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Bug report
Describe the bug
I'm attempting to use the brand new i18n feature for a static exported site. During build time it calls
getStaticProps
once for each lang defined innext.config.js
and in some cases even builds the page, but at the end it fails with:i18n support is not compatible with next export.
It feels like a tease having it almost build lol.
To Reproduce
Add langs to config
Add
getStaticProps
to a page, like/content.tsx
Expected behavior
To either:
Export all lang paths
OR
Fail early until this is better supported for
next export
System information
Additional context
The text was updated successfully, but these errors were encountered: