- useRouterフックを使用する方法: Next.jsのuseRouterフックを使用して、現在のロケールを取得し、それに基づいてStaticプロップスを取得することができます。
import { useRouter } from 'next/router';
export async function getStaticProps() {
const router = useRouter();
const locale = router.locale;
// ロケールに基づいてStaticプロップスを取得する処理
// ...
return {
props: {
// 取得したStaticプロップスのデータ
// ...
}
};
}
- getStaticProps内でロケールを取得する方法: getStaticProps関数内で直接ロケールを取得し、それを使用してStaticプロップスを取得することもできます。
export async function getStaticProps({ locale }) {
// ロケールに基づいてStaticプロップスを取得する処理
// ...
return {
props: {
// 取得したStaticプロップスのデータ
// ...
}
};
}
- i18nライブラリを使用する方法: i18n(国際化)ライブラリを使用することで、Next.js内でのロケール管理とStaticプロップスの取得を簡単に行うことができます。例えば、react-i18nextライブラリを使用する場合は、以下のようなコードになります。
import { useTranslation } from 'react-i18next';
export async function getStaticProps() {
const { i18n } = useTranslation();
const locale = i18n.language;
// ロケールに基づいてStaticプロップスを取得する処理
// ...
return {
props: {
// 取得したStaticプロップスのデータ
// ...
}
};
}
上記の方法のいずれかを選択して、現在のロケールを取得し、それに基づいてStaticプロップスを取得することができます。具体的な処理は、取得したロケールに応じてデータを取得するAPI呼び出しやデータベースクエリなどを実行することになります。