Как получить доступ к локали в пользовательском приложении на стороне сервера в Next.js?
Я переношу проект с next.js 7 на 10. Он использует react-intl для переводов и написан на TypeScript.
В предыдущей версии у меня был пользовательский server.js, и я обрабатывал в нем подмаршрутизацию (/de, /fr и т. д.) для многоязычных целей. А в пользовательском компоненте приложения через getInitialProps я получал локаль из req и передал ее в качестве реквизита моему компоненту. Итак, общая картина была примерно такой:
Пользовательское приложение:
static async getInitialProps({ Component, ctx }) {
let pageProps = {}
const { req } = ctx;
const { locale, messages } = req || (window as any).__NEXT_DATA__.props;
const initialNow = Date.now();
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
return { pageProps, locale, messages, initialNow }
}
И компонент
render() {
const { Component, pageProps, locale, messages, initialNow } = (this.props as any);
return (
<Container>
<IntlProvider locale = {locale} messages = {messages} initialNow = {initialNow}>
<Component {...pageProps} />
</IntlProvider>
</Container>
)
}
Теперь, поскольку я использую next.js 10, по многим причинам я удалил пользовательский server.js и выполнил подмаршрутизацию через i18n, поэтому я добавил это в next.config.js:
module.exports = {
i18n: {
locales: ["en", "de", "fr"],
defaultLocale: "en",
},
}
Единственное, мне нужно передать локаль в IntlProvider реакции-intl на стороне сервера и для всех страниц. Поэтому я полагаю, что должен сделать это в пользовательском приложении, а getInitialProps возвращает неправильное значение для локали (всегда по умолчанию). И мы не можем использовать getServerSideProps или getStaticProps в пользовательском _app.
Итак, наконец! вопрос в том: Как я могу получить доступ к локали на стороне сервера в одном месте для всех моих страниц? Или есть лучший подход к решению этой проблемы?
(Убрать intl и полноценно работать с i18n пока не могу, столько времени нужно на этот конкретный проект, а у нас его нет!)
Привет @Anymore, я удалил пользовательский сервер, так как хотел развернуть свое приложение на Vercel, плюс это вызвало некоторые проблемы с производительностью. Основываясь на документах Next.js 10, рекомендуется не использовать его, если только системы маршрутизации по умолчанию недостаточно для ваших конкретных задач. Пожалуйста, взгляните на пару первых строк этого официального документа: nextjs.org/docs/advanced-features/custom-server
Ответы 1
Вы можете получить доступ к locale в getInitialProps вашего пользовательского приложения через реквизит router.
static async getInitialProps({ Component, ctx, router }) {
let pageProps = {}
const { req } = ctx;
const { locale } = router; // Will return `fr` for `/fr/*` pages
const { messages } = req || (window as any).__NEXT_DATA__.props;
const initialNow = Date.now();
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
return { pageProps, locale, messages, initialNow }
}
При использовании getServerSideProps/getStaticProps за пределами пользовательских страниц приложения активная локаль может быть доступна непосредственно из объекта контекста.
export async function getServerSideProps({ locale }) {
console.info(locale) // Logs current locale
// ...
}
export async function getStaticProps({ locale }) {
console.info(locale) // Logs current locale
// ...
}
Для получения более подробной информации см. Документацию по маршрутизации Next.js i18n .
привет, просто хочу спросить, причина, по которой вы удаляете свой пользовательский сервер, заключается в том, что следующая интернационализация маршрутизации не поддерживает пользовательский сервер? @Али Афса