@inlang/paraglide-next

Getting Started

Get started instantly with the Paraglide-Next CLI.

npx @inlang/paraglide-next init
npm install

The CLI will ask you which languages you want to support. This can be changed later.

It will:

• Create an Inlang Project
• Create translation files for each of your languages
• Add necessary Provider Components and files
• Update your next.config.js file to use the Paraglide-Next Plugin.
• Offer to automatically migrate to the Localized navigation APIs if you're using the App Router (recommended)

You can now start your development server and visit /de, /ar, or whatever languages you've set up.

Creating and Using Messages

Your messages live in messages/{languageTag}.json files. You can add messages in these files as key-value pairs of the message ID and the translations.

Use curly braces to add parameters.

// messages/en.json
{
	// The $schema key is automatically ignored
	"$schema": "https://inlang.com/schema/inlang-message-format",

	"hello_world": "Hello World!",
	"greetings": "Greetings {name}."
}

Learn more about the format in the Inlang Message Format Documentation.

## Using Messages in Code

Use messages by importing them from @/paraglide/messages.js. By convention, we do a wildcard import as m.

import * as m from "@/paraglide/messages.js"

export function Home() {
	return (
		<>
			<h1>{m.homepage_title()}</h1>
			<p>{m.homepage_subtitle({ some: "param" })}</p>
		</>
	)
}

Only messages used in client components are sent to the client. Messages in Server Components don't impact bundle size.

Using the Language in Code

You can get the current language by calling the languageTag() function.

import { languageTag } from "@/paraglide/runtime"

export function Home() {
	return <h1>{languageTag()}</h1>
}

This is scoped to the current request, it's safe to use in server-components.

Examples

You can find example projects in our GitHub repository, or try them on StackBlitz:

People Love It