Currently, I am developing an I18n module utilizing the Next.js framework (v5).
The challenge I am facing is determining the user's default language universally in order to display the UI in that language.
While it is relatively simple to resolve the language from the browser, I am struggling with doing so on the server side and passing that value to a Higher Order Component (HOC) wrapping my Page component. This information is essential for specifying the locale in request headers to fetch content in the desired language.
I have successfully resolved the user's language from the server by using the 'accept-language' header in 'pages/_documents.js':
static getInitialProps(props) {
const { req, res, renderPage, isServer = false } = props;
const cookies = new Cookies();
if (isServer) {
const headers = req.headers;
const acceptedUserLanguages = acceptLanguageParser.parse(headers['accept-language']);
const mostPreferredLanguage = get(acceptedUserLanguages, '[0]', {});
// {code: 'en', region: 'GB'}
Despite this working well, I now need to access the 'mostPreferredLanguage' within my HOC wrapping the Page component. However, as the HOC code is executed before the 'getInitialProps' function, accessing 'req.headers' from the HOC itself seems impossible.
HOC implementation:
export default withData(
compose(
withRedux(configureStore),
withLoanAdvisor,
graphql(institutionPagesData, {
options: (props) => {
return {
context: {
headers: {
'gcms-locale': 'FR', // How can I consistently retrieve the user's language here?
'gcms-locale-no-default': false
},
},
};
},
}),
)(SchoolPage));
Possible Solutions
Redux
One solution I am considering is leveraging Redux. Though I attempted its implementation, I encountered limitations since Redux cannot be used on the server side.
The concept behind using Redux was to resolve the language in 'getInitialProps' and store it in Redux, then connecting to the store before executing my 'graphql()' HOC query. This would make the language available in the 'props' of the 'graphql' HOC, enabling me to run the query with the correct headers.
Unfortunately, the lack of availability of Redux on the server side hindered this approach, and initializing it through '_document.js' resulted in server crashes. Refer to this link for more information.
Cookies
An alternative method I explored was using cookies. While successful in reading cookies from both the browser and server, I faced challenges in writing them on the server side within the '_document.js' 'getInitialProps' function. The reason for this limitation remains unclear, and existing examples did not provide much assistance.