Handle homepage (no params locale) with react-server components

[agustif]

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

When using the beta react-servers instructions, you end up with a homepage without a locale.

Describe the solution you'd like

I ended up creating a locales.json to abstract away the available/default locales, and both call it in next.config.js for the rewrite so it adds the default locale if not present. This makes it work for the homepage too.

locales.json

{
  "locales": ["en", "es"],
  "defaultLocale": "es"
}

next.config.ts

const withNextIntl = require('next-intl/plugin')('./i18n.ts');
const { locales, defaultLocale } = require('./locales.json');

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: `/:path((?!api|_next|${locales.join('|')}|.*\\..*).*)`,
        destination: `/${defaultLocale}/:path*`,
      },
    ];
  },
};

module.exports = withNextIntl(nextConfig));

middleware.ts

import createMiddleware from 'next-intl/middleware';
import { locales, defaultLocale } from './locales.json';

export default createMiddleware({
  locales,
  defaultLocale,
});

export const config = {
  matcher: ['/((?!api|_next|.*\\..*).*)'],
};

No idea if this is supposed to be handled differently, but this is the solution I arrived with, maybe it would be good to add this as canonical way to handle the no locale on homepage issue?

Best regards!

Describe alternatives you've considered

Waiting for the beta to be stabilised and am sure you'll handle this