How to implement i18n in Next.js?

app/
├── [lang]/
│   ├── layout.tsx
│   ├── page.tsx
│   └── about/
│       └── page.tsx
└── dictionaries/
    ├── en.json
    └── es.json

// dictionaries/en.json
{
  "welcome": "Welcome",
  "about": "About Us"
}

// dictionaries/es.json
{
  "welcome": "Bienvenido",
  "about": "Sobre Nosotros"
}

// lib/dictionaries.ts
const dictionaries = {
  en: () => import('../dictionaries/en.json').then((m) => m.default),
  es: () => import('../dictionaries/es.json').then((m) => m.default),
};

export const getDictionary = async (locale: string) => {
  return dictionaries[locale]();
};

// app/[lang]/page.tsx
import { getDictionary } from '@/lib/dictionaries';

export default async function Home({ params: { lang } }) {
  const dict = await getDictionary(lang);

  return <h1>{dict.welcome}</h1>;
}

import { NextRequest, NextResponse } from 'next/server';

const locales = ['en', 'es'];

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  );

  if (pathnameHasLocale) return;

  const locale = request.headers.get('accept-language')?.split(',')[0].split('-')[0] || 'en';

  request.nextUrl.pathname = `/${locale}${pathname}`;
  return NextResponse.redirect(request.nextUrl);
}