Replies: 2 comments 8 replies
-
|
Can you provide more details about the "why" you want this change. What's the thing you're trying to achieve? |
Beta Was this translation helpful? Give feedback.
-
|
I hope I'm able to explain what we are doing. I got very excited when you announced the native i18n support because it's very similar to what we have been doing so far. What I'm trying to achieve is the same we have running right now but using the native i18n support. For that to happen we need to access the selected locale in Let me give you some context of what we are doing right now on (v.9.5.x). We are using a path based strategy for i18n (we have 2 languages, english In our custom We also include the following line We chose to follow this approach over using // simplified _document.ts
class MyDocument extends Document<MyDocumentProps> {
static async getInitialProps(ctx: DocumentContext) {
const locale = ctx.query.locale as string; // this is the missing part on v10. there's no "locale" query parameter
const messages = await loadMessages(locale);
const { renderPage } = ctx;
ctx.renderPage = () => renderPage({
enhanceApp: (App) => (props) => (<App {...props} {...{ locale, messages }} />),
});
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps, locale };
}
render() {
return (
<Html lang={this.props.locale}>
<Head>
{...}
</Head>
<body>
<Main />
<script src={`/static/lang/${this.props.locale}.js`} />
<NextScript />
</body>
</Html>
);
}
}// simplified _app.ts
function MyApp({ Component, pageProps, router, ...props }: MyAppProps) {
const locale = router.query.locale;
const messages = process.browser
? window.__LOCALE_DATA__ // runs on the client
: props.messages; // runs on the browser, passed by the custom _document
return (
<I18nProvider locale={locale} messages={messages}>
<Component {...pageProps} />
</I18nProvider>
);
}I hope all of this makes a bit of sense. If something is not clear enough please let me know and I'll try to explain it a bit more in detail. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Is there another way to get the locale in _document, so that we can pass it to the Html tag? |
Beta Was this translation helpful? Give feedback.
-
In my case I need to set Also, as shown in next.js with material-ui example, we need to create mui theme inside Document. But again, in my case |
Beta Was this translation helpful? Give feedback.
-
|
Hi @timneutkens, what are your thoughts on these reasons? |
Beta Was this translation helpful? Give feedback.
-
|
Posted a workaround: #18396 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
I hate to be the person doing this but, can we get an answer from the next team? @timneutkens @Timer |
Beta Was this translation helpful? Give feedback.
-
|
We're planning to add translation loading which would cover this much better than exposing these values in getInitialProps of _document. |
Beta Was this translation helpful? Give feedback.
-
|
That will kinda solve the problem, but not fully. By not making it available in _document, we won't have any transition path.. |
Beta Was this translation helpful? Give feedback.
-
|
That sounds very interesting @timneutkens. Is there an RFC for this upcoming feature? |
Beta Was this translation helpful? Give feedback.
-
Feature request
Right now (trying out official i18n support) I'm using a custom
_documentfile to load the translations files I need and making some small changes into the generated document so this data can be rehydrated on the client.I was expecting the selected locale to be part of the
DocumentContextpassed to this custom document'sgetInitialPropsbut it's not there.Describe the solution you'd like
Pass the selected locale (and possibly any i18n config data) to the custom document's
getInitialProps.Beta Was this translation helpful? Give feedback.
All reactions