#How to add nexti18next to the mantine's next-pages-template.

10 messages · Page 1 of 1 (latest)

fallow scaffold
#

Same as in any other project

plush lantern
#

I have a question, why the template use a combination of mjs and cjs ?

#

Try to do it but got some errors that i didn't encounter on other projects. Like cannot find i18n user config when i imported the i18n config to next-config.js

#

excuse me to be precise : "...to next-config.mjs"

#

I try to add i18n config like this in _app.tsx file

#

export default appWithTranslation(App, i18n);

#

import '@mantine/core/styles.css';
import Head from 'next/head';
import { MantineProvider } from '@mantine/core';
import { ReactNode } from 'react';
import { appWithTranslation } from 'next-i18next';
import { theme } from '@/theme';
import { AppPropsWithLayout } from '@/src/types/page';
import './styles.css';
import { i18n } from '@/next-i18next.config.mjs';

function App({ Component, pageProps }: AppPropsWithLayout) {
const getLayout = Component.getLayout ?? ((page: ReactNode) => page);
return (
<MantineProvider
theme={{
...theme,
primaryColor: 'red',
primaryShade: 6,
}}
>
<Head>
<title>Mantine Template</title>
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
/>
<link rel="shortcut icon" href="/favicon.svg" />
</Head>
{getLayout(<Component {...pageProps} />)}
</MantineProvider>
);
}

// @ts-ignore
export default appWithTranslation(App, i18n);

#

and in getServerSideProps in pages:

#

export async function getServerSideProps({ locale }: { locale: Locale }) {
// Fetch data from external API
const res = await fetch(${process.env.NEXT_BACKEND_URL}/vehicle/vehicle?pageSize=12&page=1);
const data = await res.json();
console.log(res);

// Pass data to the page via props
return {
props: {
data,
...(await serverSideTranslations(locale)),
},
};
}

#

got another error : ReferenceError: locale is not defined