Multilingual website Africa: FR + EN + Wolof + local languages strategy (2026)

A French-only institutional site in Senegal excludes ~40% of citizens (FR literacy ~50-55%). In Mali, ~60%. In Cameroon, the FR/EN divide is constitutional. Pressure toward multilingualism is accelerating, and best practices remain poorly documented in African context.

TL;DR

- Architecture: Next.js + next-intl or react-i18next + URL structure /[locale]/....

- Strict hreflang mandatory for SEO.

- Translation workflow: pro human for 100 key pages + AI (Claude, DeepL) for the rest.

- Wolof/Bambara/Swahili: Unicode characters, special fonts if transliteration.

Language coverage strategy

Decision #1: which languages, in what order?

URL architecture

3 possible patterns:

Pattern 1 — Path-based (recommended)

`

/fr/services

/en/services

/wo/serwiis

`

Pattern 2 — Sub-domain

`

fr.gov.sn

en.gov.sn

wo.gov.sn

`

Pattern 3 — Param

`

/services?lang=fr

/services?lang=en

`

Path-based is most SEO-friendly and easiest to maintain. It's the Next.js standard with next-intl.

Next.js + next-intl implementation

`ts

// middleware.ts

import createMiddleware from 'next-intl/middleware';

export default createMiddleware({

locales: ['fr', 'en', 'wo'],

defaultLocale: 'fr',

localePrefix: 'always',

localeDetection: true,

});

export const config = {

matcher: ['/((?!api|_next|_vercel|.*\..*).*)']

};

`

`ts

// i18n/request.ts

import { getRequestConfig } from 'next-intl/server';

export default getRequestConfig(async ({ locale }) => ({

messages: (await import(../messages/${locale}.json)).default,

timeZone: 'Africa/Dakar',

now: new Date(),

}));

`

Messages structure:

`

messages/

├── fr.json

├── en.json

└── wo.json

`

Each file shares the same shape:

`json

// messages/en.json

{

"home": {

"title": "Ministry of Health",

"subtitle": "Serving citizens"

}

}

// messages/wo.json

{

"home": {

"title": "Bunti gëstu wér-gi-yaram",

"subtitle": "Liggéeyu xeet wi"

}

}

`

Strict hreflang

Each page declares its versions:

`tsx

export async function generateMetadata({ params, pathname }) {

const path = pathname.replace(/${params.locale}, '');

return {

alternates: {

canonical: https://gov.sn/${params.locale}${path},

languages: {

'fr': https://gov.sn/fr${path},

'en': https://gov.sn/en${path},

'wo': https://gov.sn/wo${path},

'x-default': https://gov.sn/fr${path},

},

},

};

}

`

Common error: forgetting x-default or using wrong ISO codes (wo for Wolof, bm for Bambara, sw for Swahili).

Multilingual sitemap

`tsx

export default async function sitemap() {

const pages = await getStaticPages();

const entries = [];

for (const page of pages) {

for (const locale of ['fr', 'en', 'wo']) {

entries.push({

url: https://gov.sn/${locale}${page.path},

lastModified: page.updatedAt,

alternates: {

languages: {

fr: https://gov.sn/fr${page.path},

en: https://gov.sn/en${page.path},

wo: https://gov.sn/wo${page.path},

},

},

});

}

}

return entries;

}

`

Realistic translation workflow

Phase 1 — Pro human translation (strategic pages)

• Home page
• "About us" pages
• Top 50 main service pages
• Legal mentions, accessibility, privacy
• Cost ~€6-15/word for Wolof, ~€0.10-0.20 for FR/EN

Phase 2 — AI + review (large content)

• News, announcements
• Annual reports
• Technical docs

Tools:

• DeepL: excellent FR ↔ EN, no Wolof
• Claude / GPT-4: decent for Wolof with careful prompt, must review
• Lokalise / Crowdin: translation management platforms

Phase 3 — UGC (user content)

• No auto-translation
• Mark original language
• Optional on-the-fly translation tool (Google Translate widget)

Fonts and special characters

Wolof, Bambara, Fulfulde use extended Unicode:

• ŋ (eng) — Wolof, Fulfulde
• ɓ, ɗ, ƴ — Fulfulde
• é, è, ï — French
• 'ʼ apostrophe — Pulaar

Verify the main font supports these. Atkinson Hyperlegible, Noto Sans, Inter — ✓. Custom decorative fonts — often ✗.

Linguistic tests

`ts

import { test, expect } from '@playwright/test';

const LOCALES = ['fr', 'en', 'wo'];

const PAGES = ['/', '/services', '/contact'];

LOCALES.forEach(locale => {

PAGES.forEach(path => {

test(Locale ${locale} - page ${path}, async ({ page }) => {

await page.goto(/${locale}${path});

expect(await page.getAttribute('html', 'lang')).toBe(locale);

expect(await page.locator('body').textContent()).not.toContain('home.title');

});

});

});

`

Multilingual SEO

• Per-language keywords: dedicated research Wolof / EN / FR. Don't translate FR to Wolof mechanically — search expressions differ.
• Translated URLs: /fr/services vs /wo/serwiis (Wolof URL where possible).
• Native meta descriptions: not Google Translate.
• Schema.org: @type, @context in English (norm), but values in target language.
• Search Console: configure geographic targeting per subfolder.

Real case — UEMOA country Presidency site

Before: FR only, 850K visits/year.

After EN + local language added, 6 months later:

• 1.3M visits/year (+53%)
• 28% EN visits (diaspora)
• 12% local-language visits
• Linguistic accessibility complaints: 0

FAQ

Q: Should users be forced to pick a language?

A: No — IP/Accept-Language detection then pre-select with always-visible switch. Banner suggestion OK, no forced redirect.

Q: Can institutional content be auto-translated by AI in prod?

A: For critical institutional content: no. Nuance loss can cost politically. For fresh news: with systematic human review.

Q: Right-to-left languages?

A: Arabic, Hebrew need dir="rtl" and adapted design. Senegal sites in Arabic: yes for diaspora or religious docs. Implement with CSS logical properties (margin-inline-start instead of margin-left).

Conclusion

African institutional multilingualism in 2026 is more mature than thought — Next.js + next-intl + hybrid human/AI translation workflow lets you cover 3-5 languages per institution at reasonable content budget. The real challenge stays editorial quality in local languages — investing in 1-2 in-house translators pays long-term.