My site paths are like –
- https://www.example.com/us/en/products
- https://www.example.com/us/es/products
- https://www.example.com/us/en/categories
- https://www.example.com/us/es/categories
or –
https://www.example.com/[countryCode]/[languageCode]/products
Though libraries like – next-intl provides a way to deal with languages only but not if it has some previous country code attached to it.
Let me know any pointer on this.
0
Finally it works. App Router setup without i18n routing
https://next-intl-docs.vercel.app/docs/getting-started/app-router/without-i18n-routing
middleware.ts
<code>import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const requestHeaders = new Headers(request.headers);
const url = new URL(request.url);
const locale = url.pathname.split('/').filter(Boolean)[1];
requestHeaders.set('locale', locale);
const response = NextResponse.next({
request: {
headers: requestHeaders,
},
});
return response;
}
</code>
<code>import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const requestHeaders = new Headers(request.headers);
const url = new URL(request.url);
const locale = url.pathname.split('/').filter(Boolean)[1];
requestHeaders.set('locale', locale);
const response = NextResponse.next({
request: {
headers: requestHeaders,
},
});
return response;
}
</code>
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const requestHeaders = new Headers(request.headers);
const url = new URL(request.url);
const locale = url.pathname.split('/').filter(Boolean)[1];
requestHeaders.set('locale', locale);
const response = NextResponse.next({
request: {
headers: requestHeaders,
},
});
return response;
}
i18n/request.ts:
<code>import { getRequestConfig } from 'next-intl/server';
import { headers } from 'next/headers';
export default getRequestConfig(async () => {
// Provide a static locale, fetch a user setting,
// read from `cookies()`, `headers()`, etc.
const locales = ['en', 'de'];
const headersList = headers();
const l = headersList.get('locale') || '';
let locale = 'en';
if (locales.includes(l)) {
locale = l;
}
return {
locale,
messages: (await import(`../messages/${locale}.json`)).default,
};
});
</code>
<code>import { getRequestConfig } from 'next-intl/server';
import { headers } from 'next/headers';
export default getRequestConfig(async () => {
// Provide a static locale, fetch a user setting,
// read from `cookies()`, `headers()`, etc.
const locales = ['en', 'de'];
const headersList = headers();
const l = headersList.get('locale') || '';
let locale = 'en';
if (locales.includes(l)) {
locale = l;
}
return {
locale,
messages: (await import(`../messages/${locale}.json`)).default,
};
});
</code>
import { getRequestConfig } from 'next-intl/server';
import { headers } from 'next/headers';
export default getRequestConfig(async () => {
// Provide a static locale, fetch a user setting,
// read from `cookies()`, `headers()`, etc.
const locales = ['en', 'de'];
const headersList = headers();
const l = headersList.get('locale') || '';
let locale = 'en';
if (locales.includes(l)) {
locale = l;
}
return {
locale,
messages: (await import(`../messages/${locale}.json`)).default,
};
});
[code]/[locale]/page.tsx
<code>import { useTranslations } from 'next-intl';
export default function HomePage() {
const t = useTranslations('HomePage');
return <h1>{t('title')}</h1>;
}
</code>
<code>import { useTranslations } from 'next-intl';
export default function HomePage() {
const t = useTranslations('HomePage');
return <h1>{t('title')}</h1>;
}
</code>
import { useTranslations } from 'next-intl';
export default function HomePage() {
const t = useTranslations('HomePage');
return <h1>{t('title')}</h1>;
}
messages/de.json
<code>{
"HomePage": {
"title": "Hallo Welt!"
}
}
</code>
<code>{
"HomePage": {
"title": "Hallo Welt!"
}
}
</code>
{
"HomePage": {
"title": "Hallo Welt!"
}
}
messages/en.json
<code>{
"HomePage": {
"title": "Hello world!"
}
}
</code>
<code>{
"HomePage": {
"title": "Hello world!"
}
}
</code>
{
"HomePage": {
"title": "Hello world!"
}
}
2