Я использую контекст React для хранения локали для веб-сайта NextJS (например, example.com/en/). Настройка выглядит следующим образом:
components/Locale/index.jsx
import React from 'react';
const Context = React.createContext();
const { Consumer } = Context;
const Provider = ({ children, locale }) => (
<Context.Provider value={{ locale }}>
{children}
</Context.Provider>
);
export default { Consumer, Provider };
страницы/_app.jsx
import App, { Container } from 'next/app';
import React from 'react';
import Locale from '../components/Locale';
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};
const locale = ctx.asPath.split('/')[1];
return { pageProps, locale };
}
render() {
const {
Component,
locale,
pageProps,
} = this.props;
return {
<Container>
<Locale.Provider locale={locale}>
<Component {...pageProps} />
</Locale.Provider>
</Container>
};
}
}
Все идет нормально. Теперь на одной из моих страниц я получаю данные из API Contentful CMS в методе getInitialProps
жизненного цикла. Это выглядит примерно так:
страницы/index.jsx
import { getEntries } from '../lib/data/contentful';
const getInitialProps = async () => {
const { items } = await getEntries({ content_type: 'xxxxxxxx' });
return { page: items[0] };
};
На этом этапе мне нужно сделать этот запрос с локалью, поэтому мне нужно получить доступ к Local.Consumer
в приведенном выше getInitialProps
. Это возможно?