Integrating CMS (Strapi) with Next.js i18n (next-intl) for Dynamic Content

Questions and Answers
,
1
System Information
  • **Strapi Version4.24:
  • **Operating SystemUbuntu 20.04.6 LTS:
  • **Database mysql:
  • **Node Version v18.17.0:
  • **NPM Version8.6.0:

Details of the issue as posted on stackoverflow

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;