How to integrate next-intl with contentlayer?

[Seokhyeon315]

Is your feature request related to a problem? Please describe.

I have tried to build a project with tech stack including NextJS13 app router with React Server component, next-intl, and contentlayer. I am using route based locale such as localhost:3000/[locale]/[dynamic content route]. I'm always frustrated when I have to use only message with json data with limited format style that next-intl could render. It's not easy to handle large context of paragraphs such as article or blogs with message/json method.

Describe the solution you'd like

I wish there's direct setup or new easier feature of rendering mdx content or json data generated by contentlayer or improve of renndering process of message/json format.

Describe alternatives you've considered

I have considered this blog post describe how to handle localization with mdx files but the post author used i18n instead of next-intl. This is the link of post: https://www.adamrichardson.dev/blog/localisation-i18n-nextjs-appdir-13 .

[amannn]

Contentlayer is a great addition to next-intl to handle large chunks of rich content! You should be able to use its APIs like allPosts the same way as if you're not using next-intl. I don't see any issues with that.

I'll move this to a discussion as this is a usage question, I hope you understand.

[Seokhyeon315]

@amannn I am quite new to these stuffs. So basically, what you meant was I should check locale using usePathname() of next-intl to check whether locale is english or korean and fetch and render mdx data using contentlayer allPosts, right?

Update: I found that instead of usePathname(), using getLocale() to check current locale.

However, I have other question: how to set up next.config.js including next-intl, contentlayer???

//next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
};

const withNextIntl = require("next-intl/plugin")("./src/i18n.ts");

const { withContentlayer } = require("next-contentlayer");

module.exports = withNextIntl(withContentlayer(nextConfig));

I am wondering which one I should put higher..

[issamahwach]

Placing them in the exact same order worked for me without any issue.

[P-Essonam]

jhh