App Router

If you don’t already have a Next.js project using App Router set up with Makeswift, follow the App Router Installation guide.

​

Add locales in the Visual Builder

Open site settings and go to the Locales tab:

To add a new locale, click the + Add locale button. In this case, we’ve added es-ES. You can then modify and delete a locale (except the default locale) by hovering over it and clicking the settings icon.

​

Configure next-intl for your application

We recommend using the next-intl package to handle localization. You can follow their App Router setup documentation to configure your application. This guide will walk you through updating your file structure, configure language files, middleware, etc.

After following this guide, there are a couple of things you’ll want to double check to ensure everything works well with Makeswift.

1. Make sure that the exported config in the next.config.ts file composes both withMakeswift and withNextIntl.

import createWithMakeswift from "@makeswift/runtime/next/plugin";
import createNextIntlPlugin from "next-intl/plugin";

const withMakeswift = createWithMakeswift();
const withNextIntl = createNextIntlPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {
  // your existing next config
};

export default withNextIntl(withMakeswift(nextConfig));

2. In your root layout, make sure that the newly added NextIntlClientProvider wraps the MakeswiftProvider.

<NextIntlClientProvider>
  <MakeswiftProvider previewMode={(await draftMode()).isEnabled}>
    {children}
  </MakeswiftProvider>
</NextIntlClientProvider>

3. The locales that you configure in code should match exactly the locales as listed in Makeswift. In this case, we’ve used en-US and es-ES.

4. Make sure all of your routing files are nested under /app/[lang] except for the Makeswift API handler.

​

Fetch snapshots by locale

Update your catch-all route to fetch the page snapshots by locale.

import { getSiteVersion } from "@makeswift/runtime/next/server";
import { notFound } from "next/navigation";
import { Page as MakeswiftPage } from "@makeswift/runtime/next";

import { client } from "@/makeswift/client";
import { routing } from "@/i18n/routing";

type ParsedUrlQuery = { locale: string; path?: string[] };

export async function generateStaticParams() {
  const pages = await client.getPages().toArray();

  return pages.flatMap((page) =>
    routing.locales.map((locale) => ({
      path: page.path.split("/").filter((segment) => segment !== ""),
      locale,
    }))
  );
}

export default async function Page({
  params,
}: {
  params: Promise<ParsedUrlQuery>;
}) {
  const { locale, path: pathParam } = await params;

  const path = "/" + (pathParam ?? []).join("/");
  const snapshot = await client.getPageSnapshot(path, {
    siteVersion: getSiteVersion(),
    locale,
  });

  if (snapshot == null) return notFound();

  return <MakeswiftPage snapshot={snapshot} />;
}

​

Edit your pages in the Visual Builder

Once you’ve set everything up, you should be able to switch to the locale using the locale switcher in the Visual Builder.

The first time you switch to a new locale (in this case switching from en-US to es-ES), you’ll notice a message that informs you that the localized page inherits from the default locale. To stop inheriting from the default locale and start customizing the content for the localized page, click the Edit for this locale button.

Note that you will continue to see the message about inheriting from the base locale until you click that button. This also means that until you decide to edit this localized page, it will continue to serve the page for the default locale.

After choosing to edit the localized page, content changes are only associated with this locale and do not affect the base locale.

​

Localized resources

When making changes on a different locale you can override any property, including the page’s pathname, metadata, and SEO tags.

You can also localize a visually created component. While in a localized page, select the component and click Edit component. Make your changes, and then click Save. The changes made will be saved for that specific locale and will not affect the component for the base locale.

​

Publishing

Remember that localized content (pages, components, etc.) needs to be published just like any other resource. After you’re done making all of your changes, publish them for these changes to go live. In the publish dialog, you’ll be able to see the locale attached to each resource.