#Manual Setup
Ideally you would use the @inlang/paraglide-next init command to initialize your app, but in case that fails for some reason or if you're updating from an older version we also provide manual setup instructions.
#App Router
#1. Install Dependencies
(p)npm install @inlang/paraglide-next
#2. Create an Inlang Project
The Inlang Project manages your localisation settings and messages. You can initialize one with the @inlang/paraglide-js init command.
npx @inlang/paraglide-js init
#3. Add the Paraglide-Next Plugin
In next.config.mjs use the Paraglide-Next plugin. This will make sure to re-run the compiler whenever necessary and make any necessary virtual modules available.
In next.config.mjs add the following:
import { paraglide } from '@inlang/paraglide-next/plugin'
/** @type {import('next').NextConfig} */
const nextConfig = {
// your usual next config
}
export default paraglide({
paraglide: {
project: './project.inlang',
outdir: './paraglide'
},
...nextConfig
})
If you're still using
next.config.jsit's recommended that you switch the config over tonext.config.mjs
#4. Add the necessary files
You need to create two files.
// src/lib/i18n.ts
import { Navigation, Middleware, PrefixStrategy } from "@inlang/paraglide-next"
import type { AvailableLanguageTag } from "@/paraglide/runtime"
import * as m from "@/paraglide/messages"
export const strategy = PrefixStrategy<AvailableLanguageTag>()
export const middleware = Middleware({ strategy })
export const { Link, useRouter, usePathname, redirect, permanentRedirect } = Navigation({ strategy })
// src/middleware.ts
export { middleware } from "@/lib/i18n"
#5. Add the Language Provider
Add the LanguageProvider component. It will make the language available on the server. Also set the lang attribute to the current language.
// src/app/root.tsx
import { LanguageProvider } from "@inlang/paraglide-next"
import { languageTag } from "@/paraglide/runtime.js"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<LanguageProvider>
<html lang={languageTag()}>
<body>
<main className="container">{children}</main>
</body>
</html>
</LanguageProvider>
)
}
You may have to start your dev server once before
@/paraglide/runtime.jsis available
#6. Set up i18n routing
Finally, go through your existing app code & use the localised versions of the different navigation APIs exported from @/lib/i18n
- import Link from "next/link"
+ import { Link } from "@/lib/i18n"
- import { useRouter, usePathname } from "next/navigation"
+ import { useRouter, usePathname } from "@/lib/i18n"
#Pages Router
Ideally you would use the @inlang/paraglide-next init command to initialize your app, but in case that fails for some reason or if you're updating from an older version we also provide manual setup instructions.
#1. Install Dependencies
(p)npm install @inlang/paraglide-next
#2. Create an Inlang Project
The Inlang Project manages your localisation settings and messages. You can initialize one with the @inlang/paraglide-js init command.
npx @inlang/paraglide-js init
#3. Add the Paraglide-Next Plugin
In next.config.mjs use the Paraglide-Next plugin. This will make sure to re-run the compiler whenever necessary and make any necessary virtual modules available.
In next.config.mjs add the following:
import { paraglide } from '@inlang/paraglide-next/plugin'
/** @type {import('next').NextConfig} */
const nextConfig = {
// your usual next config
}
export default paraglide({
paraglide: {
project: './project.inlang',
outdir: './paraglide'
},
...nextConfig
})
If you're still using
next.config.jsit's recommended that you switch the config over tonext.config.mjs
#4. Set up i18n routing
The Pages router comes with i18n routing out of the box
Set it up in next.config.mjs:
import { paraglide } from '@inlang/paraglide-next/plugin'
/** @type {import('next').NextConfig} */
const nextConfig = {
i18n: {
locales: ['en', 'de-CH'],
defaultLocale: 'en'
}
}
export default paraglide({
paraglide: {
project: './project.inlang',
outdir: './paraglide'
},
...nextConfig
})
#5. Add the ParaglideJS Provider
Finally, add the ParaglideJS component to your _app.tsx file.
// src/pages/_app.tsx
import type { AppProps } from "next/app"
import { ParaglideJS } from "@inlang/paraglide-next/pages"
export default function App({ Component, pageProps }: AppProps) {
return (
<ParaglideJS>
<Component {...pageProps} />
</ParaglideJS>
)
}
