product icon

Paraglide JS

App
i18n library for astro

This example demonstrates how to use Paraglide JS with Astro in SSR mode. The source code can be found here.

FeatureSupported
CSR
SSR
SSG
URLPattern
Any Strategy

You can integrate Paraglide JS yourself to achieve SSG. PR with an example is welcome.

Setup

1. If you have not initialized Paraglide JS yet, run:

npx @inlang/paraglide-js@latest init

2. Add the vite plugin to the astro.config.mjs file and set output to server:

import { defineConfig } from "astro/config";
+import { paraglideVitePlugin } from "@inlang/paraglide-js";
+import node from "@astrojs/node";

export default defineConfig({
  // ... other
+	vite: {
+		plugins: [
+			paraglideVitePlugin({
+				project: "./project.inlang",
+				outdir: "./src/paraglide",
+			}),
+		],
	},
+  output: "server",
+  adapter: node({ mode: "standalone" }),
});

3. Create or add the paraglide js server middleware to the src/middleware.ts file:

import { paraglideMiddleware } from "./paralide/server.js";

export const onRequest = defineMiddleware((context, next) => {
+	return paraglideMiddleware(context.request, () => next());
});

You can read more about about Astro's middleware here.

Usage

See the basics documentation for more information on how to use Paraglide's messages, parameters, and locale management.

Disabling AsyncLocalStorage in serverless environments

You can disable async local storage in serverless environments by using the disableAsyncLocalStorage option.

This is only safe in serverless environments where each request gets its own isolated runtime context. Using it in multi-request server environments could lead to data leakage between concurrent requests.

	vite: {
		plugins: [
			paraglideVitePlugin({
				project: "./project.inlang",
				outdir: "./src/paraglide",
+				disableAsyncLocalStorage: true,
			}),
		],
	},