Migrating getStaticProps({locale}) from Pages to App in Next.js

Question

I was trying to migrate from Pages to App, and got stuck on getStaticProps({locale}) in Next 13 App Router page.

getStaticProps function takes in locale prop by default, but where do I get that locale when using App Router ?

Here is my "shortened" component:

import React from 'react';
import {message} from 'antd';
import {TFunction, I18n, useTranslation} from 'next-i18next';
import {NextPage} from 'next';
import {NextSeo} from 'next-seo';
import {useRouter} from 'next/navigation';
import {serverSideTranslations} from 'next-i18next/serverSideTranslations';

import Layout from '../../components/Layout';
import AuthorForm, {FormFields} from '../../components/Author/Form';

import {useCreateAuthor} from '../../service-hooks/resourceAuthor';

type InitialProps = Promise<{
  namespacesRequired: string[];
}>;

type Props = {
  t: TFunction;
  i18n: I18n;
};


const NewAuthor: NextPage<Props, InitialProps> = () => {
  const {t, i18n} = useTranslation(['common', 'form', 'admin', 'resource-types']);
  const router = useRouter();
  const {mutate: create, isLoading} = useCreateAuthor();

  return (
    <Layout defaultLanguage={i18n.language} tFunc={t}>
      <NextSeo title={t('form:new', {entity: t('admin:authors.label')})}/>
      <div className="pt-4">
        <AuthorForm tFunc={t} processLoading={isLoading} texts={AuthorFormTexts} onFinish={handleFinish}/>
      </div>
    </Layout>
  );
};

const getStaticProps = async function({locale}) {
  return {
    ...(await serverSideTranslations(locale, ['common', 'form', 'admin', 'resource-types'])),
    // Will be passed to the page component as props
  };
}

export default NewAuthor;

I tried to just use an async function, but it doesn't take in the locale prop

import React from 'react';
import {message} from 'antd';
import {TFunction, I18n, useTranslation} from 'next-i18next';
import {NextPage} from 'next';
import {NextSeo} from 'next-seo';
import {useRouter} from 'next/navigation';
import {serverSideTranslations} from 'next-i18next/serverSideTranslations';

import Layout from '../../components/Layout';
import AuthorForm, {FormFields} from '../../components/Author/Form';

import {useCreateAuthor} from '../../service-hooks/resourceAuthor';

type InitialProps = Promise<{
  namespacesRequired: string[];
}>;

type Props = {
  t: TFunction;
  i18n: I18n;
};

// According to the docs, the function below should work like getStaticProps
async function getLocale({locale}) {
  return {
    ...(await serverSideTranslations(locale, ['common', 'form', 'admin', 'resource-types'])),
    // Will be passed to the page component as props
  };
}

// Removed types because they're giving an Error when I make this function async.
const NewAuthor = async () => {
  const {t, i18n} = useTranslation(['common', 'form', 'admin', 'resource-types']);
  const router = useRouter();
  const {mutate: create, isLoading} = useCreateAuthor();

  return (
    <Layout defaultLanguage={i18n.language} tFunc={t}>
      <NextSeo title={t('form:new', {entity: t('admin:authors.label')})}/>
      <div className="pt-4">
        <AuthorForm tFunc={t} processLoading={isLoading} texts={AuthorFormTexts} onFinish={handleFinish}/>
      </div>
    </Layout>
  );
};

export default NewAuthor;

Answer 1

I removed next-i18n and replaced it with next-intl which has a hook useLocale:

'use client'

const Home = () => {
  const locale = useLocale();
}

export default home