# Next.js Website Translation and Localization | Vitra.ai

> Localize Next.js pages and interface content while preserving SEO routes, rendering behavior, components, and release ownership.

**Canonical URL**: https://www.vitra.ai/integration/nextjs
**Source**: This is the Markdown rendering of https://www.vitra.ai/integration/nextjs, generated at build time from that page.

---

[←All integrations](https://www.vitra.ai/integrations)

Next.js Translation

Browse ▾

[←All integrations](https://www.vitra.ai/integrations)

![](https://www.vitra.ai/icons/integrations/nextjs.svg)

# Next JS

Next.js is a React framework for building fast, scalable web applications. It provides built-in features like routing and server-side rendering.

[Connect](https://universe.vitra.ai)

## Using Universe Website Translation in a Next.js Project (Pre-Installed Setup)

If Next.js is already configured in your environment, you do NOT need to install anything additional.

You only need to inject the Universe Website Translation snippet at the global level so it loads across all pages.

![Using Universe Website Translation in a Next.js Project (Pre-Installed Setup)](https://www.vitra.ai/static/images/integration/nextjs/overview.png)

## Step-by-Step Configuration for Next.js using Next.js (App Router – Next 13+)

### Step 1: Install the Package

- Install the Vitra Web Translator package in your Next.js project:

![Step 1: Install the Package](https://www.vitra.ai/static/images/integration/shared/js-install-package.png)

### Step 2: Create a Common Component

- Build a reusable translation component that can be used across your website or application. This ensures consistent configuration, reduces repetitive code, and makes it easier to manage updates or changes to your translation setup.

![Step 2: Create a Common Component](https://www.vitra.ai/static/images/integration/shared/js-common-component.png)

### Step 3: Add the Component to Your App

- App Router (Next.js 13+)
- Once created, the common component can be easily reused across different pages or sections of your application. This ensures a consistent translation experience and simplifies implementation without duplicating code.

![Step 3: Add the Component to Your App](https://www.vitra.ai/static/images/integration/shared/js-use-component.png)

## What happens after setup?

Once active, Universe Website Translation:

- Translates all Next.js pages
- Works across client-side navigation
- Handles dynamic content
- Preserves layout & styling
- Supports global users directly

## Where to go next

Next.js Website Translation and Localization is one way into Vitra.ai. Website translation is the capability doing the work behind it.

[CapabilityWebsite translation](https://www.vitra.ai/features/website-translation)[Read nextTranslate a Next.js Site for Search Engines](https://www.vitra.ai/general/translate-a-nextjs-site)[Read nextContinuous localization for always-on content](https://www.vitra.ai/general/continuous-localization)

Browse every connector on the [integrations directory](https://www.vitra.ai/integrations).

---

## Structured data

```json
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Next.js Website Translation and Localization integration",
  "applicationCategory": "BusinessApplication",
  "operatingSystem": "Web",
  "url": "https://www.vitra.ai/integration/nextjs",
  "description": "Localize Next.js pages and interface content while preserving SEO routes, rendering behavior, components, and release ownership.",
  "featureList": [
    "Translates all Next.js pages",
    "Works across client-side navigation",
    "Handles dynamic content",
    "Preserves layout & styling",
    "Supports global users directly"
  ],
  "isPartOf": {
    "@type": "SoftwareApplication",
    "name": "Vitra Universe",
    "url": "https://www.vitra.ai"
  },
  "publisher": {
    "@id": "https://www.vitra.ai/#organization"
  }
}
```

```json
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.vitra.ai"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Integrations",
      "item": "https://www.vitra.ai/integrations"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Next.js Website Translation and Localization integration",
      "item": "https://www.vitra.ai/integration/nextjs"
    }
  ]
}
```