Description

I’m developing a Next.js application that utilizes next-intl for internationalization (i18n) and I’m looking to integrate a CMS (specifically Strapi) to manage dynamic content for different locales. I have a setup where the data is currently fetched from json dictionaries located inside of messages directory. I followed the next-intl docs

Issue

I’ve implemented a proof-of-concept approach where I fetch data from Strapi using an async function (getData) and then use this data directly in my component. However, I’m unsure if this is the recommended or optimal way to integrate a CMS with Next.js and next-intl

import React from 'react';
import { useLocale } from 'next-intl';

async function getData(locale) {
  try {
    const res = await fetch(`http://127.0.0.1:1337/api/y-one?locale=${locale}`);
    if (!res.ok) {
      throw new Error(`HTTP error! Status: ${res.status}`);
    }
    const data = await res.json();
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

async function Page() {
  const locale = useLocale();
  const t = await getData(locale);

  return (
    <div className='bg-black w-screen h-screen'>{t.data.attributes.title}</div>
  );
}

export default Page;

Questions

1. Is using an async function (getData) inside the component to fetch data from Strapi based on the locale an appropriate approach for integrating a CMS with Next.js and next-intl?
2. What are the best practices for managing dynamic content (such as localized messages) retrieved from a CMS in a Next.js application?
3. Are there alternative methods or libraries that I should consider for integrating Strapi with next-intl and Next.js for internationalized content?

Additional context

1. Project structure

├── messages
│   ├── ar.json
│   ├── en.json
│   ├── es.json
│   ├── fr.json
│   ├── hi.json
│   ├── mr.json
│   └── sw.json
├── src
│   ├── app
│   │   └── [locale]
│   │       ├── ...
│   ├── i18n.ts
│   ├── middleware.ts
│   ├── navigation.ts
│   └── pages
│       └── api
│           └── send-mail.js
├── tailwind.config.js
├── tsconfig.json
└── ...

2. How I am consuming the data currently

import ...
import {useTranslations} from 'next-intl';

export default function Home() {
  const t = useTranslations('Homepage');
  
  const heroSectionData = {
    title: {
      beforeSpan: t('HeroSection.title.beforeSpan'),
      spanContent: t('HeroSection.title.spanContent'),
      afterSpan: t('HeroSection.title.afterSpan')
    },
    linkButton: {
      title: t('HeroSection.linkButton.title')
    }
  };

  return (
    <main>
      <HeroSection data={heroSectionData} />
      ...
    </main>
    )

3. My goal

My goal is to replace static JSON files with dynamic content fetched from a CMS like Strapi to enable content management and localization.

4. Environment

Next.js version: ^14.1.4
next-intl version: ^3.11.1
Strapi version: "4.24.0"

Any guidance, advice, or code examples would be greatly appreciated! Thank you.