#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