Im working on a Prismic/Nextjs website with two locales. A master locale nl-nl and a second locale en-eu. I followed al the steps in the prismic/nextjs docs. I want to hide the default locale en shorten en-eu to /en, but I cant get it working.
Followed all the steps in the Primsic locale / Nextjs setup
Cant hide the default locale and shorten the secondary locale
Hi @Thomas4 ,
Thanks for the details, I think this is just a locale-mapping setup between Prismic and Next.js.
Goal: URLs = / for Dutch (default) and /en for English, while your Prismic repo uses nl-nl and en-eu.
// next.config.js
module.exports = {
i18n: {
locales: ['nl', 'en'],
defaultLocale: 'nl',
},
};
Map Next locales ⇄ Prismic locales
Create tiny helpers you can reuse anywhere you fetch or build links:
// lib/locales.ts
export const nextToPrismic = (locale?: string) =>
locale === 'en' ? 'en-eu' : 'nl-nl';
export const prismicToNext = (lang: string) =>
lang.startsWith('en') ? 'en' : 'nl';
// app/[...]/page.tsx (example)
import { createClient } from '@/prismicio';
import { nextToPrismic } from '@/lib/locales';
export default async function Page({ params: { locale } }: { params: { locale?: string } }) {
const client = createClient();
const doc = await client.getByUID('page', 'home', { lang: nextToPrismic(locale) });
// ...
}
If you don’t have an explicit [locale] segment (typical with Next i18n), you can read params.locale from the route or use headers() to get x-next-locale. The key is: always pass lang: nextToPrismic(locale).
Make links use / and /en
If you use PrismicNextLink (or next/link), pass the Next locale, not the Prismic one:
import { PrismicNextLink } from '@prismicio/next';
<PrismicNextLink field={doc.data.cta_link} locale={/* 'nl' or 'en' */} />
When rendering language switchers or alternate languages from Prismic’s alternate_languages, convert with prismicToNext(lang) so English becomes /en, not /en-eu.
next.config.js doesn’t still list en-eu. It must be ['nl','en'].
All Prismic queries pass lang: nextToPrismic(locale).
All internal links use the Next locale ('nl'|'en'), not the Prismic one.
No manual rewrites trying to rename /en-eu → /en (not needed if you map correctly).
If it still doesn’t work, could you share:
Your Next version and whether you use App or Pages router.
next.config.js (i18n section).
Your prismicio.ts createClient() and any routeResolver.
A snippet showing how you generate links/navigation.
Thanks for your help! Im new to this….
Im using Next 15.5.4 with the App router and I have route structure like:
[lang]
uid → page.tsx
aanbouwdelen - page.tsx → category - page.tsx → [uid] - page.tsx
nieuws → [uid] → page.tsx
Next.config.ts:
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
i18n: {
locales: ["nl", "en"],
defaultLocale: "nl",
},
};
export default nextConfig;
Prismicio.ts:
Prismicio.ts: import {
createClient as baseCreateClient,
type ClientConfig,
type Route
} from "@prismicio/client";
import { enableAutoPreviews } from "@prismicio/next";
import sm from "../slicemachine.config.json";
export const repositoryName = sm.repositoryName;
const routes: Route[] = [
{ type: "home", path: "/:lang?/" },
{ type: "page", path: "/:lang?/:uid" },
{ type: "nieuws", path: "/:lang?/:uid" },
{ type: "vacatures", path: "/:lang?/:uid" },
{ type: "nieuws_item", path: "/:lang?/nieuws/:uid" },
{ type: "vacature_item", path: "/:lang?/vacatures/:uid" },
{ type: "aanbouwdelen", path: "/:lang?/aanbouwdelen" },
{ type: "category", path: "/:lang?/aanbouwdelen/:uid" },
{
type: "product",
path: "/:lang?/aanbouwdelen/:category/:uid",
resolvers: { category: "category" },
},
];
export function createClient(config: ClientConfig = {}) {
const client = baseCreateClient(repositoryName, {
routes,
fetchOptions:
process.env.NODE_ENV === "production"
? {
next: { tags: ["prismic"] },
cache: "force-cache",
}
: {
next: { revalidate: 5 },
},
...config,
});
enableAutoPreviews({ client });
return client;
}
<nav className="flex justify-end py-2">
<div className="flex justify-end w-fit">
<ul className="flex justify-between w-full uppercase font-medium">
{nav?.data?.upperlinkrow?.map((item, index) => (
<li key={index} className="text-primary hover:text-secondary text-primary-400 p-2 border-t border-gray-200">
<div className="flex justify-between items-center">
<PrismicNextLink field={item.link} />
</div>
</li>
))}
</ul>
</div>
</nav>
Thanks for sharing this information. What are the problems you’re seeing here?