Upgrade Next.js Frontend to 6.5.0

import { normalizeToAsset } from "@webiny/sdk-nextjs"; // also exported by @webiny/website-builder-nextjs 6.5

const asset = normalizeToAsset(inputs.image);
// asset.url, asset.mimeType, asset.image?.width, asset.image?.height, asset.image?.alt

Upgrade this Next.js app from the Webiny 6.4 SDK to the Webiny 6.5 SDK.

The app started from the Webiny Next.js starter kit (6.4). It uses
@webiny/website-builder-nextjs and @webiny/sdk. Webiny 6.5 replaces both with a
single package, @webiny/sdk-nextjs.

Reference implementation (read these files before changing anything):
https://github.com/webiny/website-builder-nextjs/tree/starter-kit-6.5.x
Most relevant: sdk/initializeSdk.ts, sdk/SdkInitializer.ts, sdk/groups.ts,
app/layout.tsx, app/(site)/[[...slug]]/page.tsx, app/api/redirects/route.ts,
components/DocumentRenderer.tsx, next.config.ts, theme/theme.ts, theme/theme.css.

Make these changes:

1. Dependencies
   - Remove @webiny/website-builder-nextjs and @webiny/sdk from package.json.
   - Install @webiny/sdk-nextjs@~6.5.0 with the package manager this project
     already uses (check the lockfile).

2. Imports
   - Replace every import from "@webiny/website-builder-nextjs" and
     "@webiny/sdk" with "@webiny/sdk-nextjs".
   - "@webiny/website-builder-nextjs/webpack" becomes "@webiny/sdk-nextjs/webpack.js".
   - "@webiny/website-builder-nextjs/lexical.css" becomes "@webiny/sdk-nextjs/lexical.css".
   - The Language type is now exported from "@webiny/sdk-nextjs".

3. SDK initialization
   - Replace contentSdk.init(...) with sdk.init(...) from "@webiny/sdk-nextjs":
       sdk.init({
         endpoint: String(process.env.NEXT_PUBLIC_WEBINY_API_HOST),
         token: String(process.env.NEXT_PUBLIC_WEBINY_API_KEY),
         tenant: tenantId ?? String(process.env.NEXT_PUBLIC_WEBINY_API_TENANT),
         preview,
         wb: { theme, componentGroups }
       });
   - The old second argument (a callback calling registerComponentGroup) is gone.
     Turn the registered groups into an exported array of ComponentGroup objects
     (same name, label, description, icon, filter) and pass it as wb.componentGroups.
   - Keep the existing initializer function and client initializer component, but
     rename them if you like (the reference uses initializeSdk and SdkInitializer).
   - Delete the separate `new Webiny({...})` client (usually src/webinySdk.ts).
     Replace its uses: webinySdk.languages -> sdk.languages, webinySdk.cms -> sdk.cms,
     webinySdk.fileManager -> sdk.fileManager, webinySdk.tenantManager -> sdk.tenantManager.

4. Data fetching. The new methods return a Result instead of a raw value:
   - contentSdk.getPage(path)            -> sdk.wb.getPage(path)
     old: page or null. new: check result.isOk(), then use result.value.
   - contentSdk.listPages()              -> sdk.wb.listPages()
     old: pages.data. new: result.isOk() ? result.value.data : [].
   - contentSdk.getRedirectByPath(path)  -> sdk.wb.getRedirectByPath(path)
     new: the redirect is result.value when result.isOk(). Keep the redirects
     route's response shape ({ redirect }) unchanged, because middleware.ts reads it.

   Initialization order matters. In 6.4 the separate `new Webiny()` client was
   created when its module loaded, so calls like webinySdk.languages always worked.
   In 6.5 every sdk.* call throws "SDK is not initialized" until sdk.init() has run.
   - Call the SDK initializer once at the top of every server entry point, before
     any sdk.* call: page components, generateMetadata, generateStaticParams and
     route handlers. In page components and generateMetadata, pass the draft mode
     flag:
       const { isEnabled } = await draftMode();
       initializeSdk({ preview: isEnabled, tenantId: await getTenant() });
     draftMode() isn't available in generateStaticParams, and the redirects route
     gets the tenant from its query string, so pass only the tenant there.
   - Do not leave the initializer inside a helper such as getPage() when other SDK
     calls (for example sdk.languages.listLanguages()) run next to it in
     Promise.all. The other call can run first and fail on the first request
     after a cold start.

5. Components
   - createComponent(...) can stay, or be renamed to createWbComponent(...). Both
     are the same function. Do not change component `name` values. They are
     stored in published pages, and renaming breaks those pages.
   - File inputs (createFileInput). 6.5 adds an `image` object (width, height,
     crop, focalPoint, alt, caption) and a `url` with the crop applied. The root
     mimeType, width and height stay for backwards compatibility. Values saved in
     6.4 have no `image` or `url`. Find every component that reads a file input
     and read the value through normalizeToAsset() from "@webiny/sdk-nextjs",
     which fills in `image` and `url` for values saved in 6.4:
       const asset = normalizeToAsset(inputs.image);
       // asset.url, asset.mimeType, asset.image?.width, asset.image?.height, asset.image?.alt
     Use asset.url (not src) so crops set in the editor show up, and
     asset.image?.alt for the alt text.

6. Environment variables
   - Rename NEXT_PUBLIC_WEBSITE_BUILDER_API_KEY, NEXT_PUBLIC_WEBSITE_BUILDER_API_HOST,
     NEXT_PUBLIC_WEBSITE_BUILDER_API_TENANT and NEXT_PUBLIC_WEBSITE_BUILDER_ADMIN_HOST
     to NEXT_PUBLIC_WEBINY_API_KEY, NEXT_PUBLIC_WEBINY_API_HOST,
     NEXT_PUBLIC_WEBINY_API_TENANT and NEXT_PUBLIC_WEBINY_ADMIN_HOST.
   - Update every reference: .env files, .env.example, next.config.ts (image
     remotePatterns and the frame-ancestors CSP header), the SDK initializer, and
     any CI or hosting configuration files in the repo. Keep the values.
   - List every environment variable I need to rename in my hosting provider.

7. next.config.ts
   - Add "pino-pretty": "commonjs pino-pretty" next to the existing
     "thread-stream" entry in config.externals.

Do not:
- Move files out of src/. The 6.5 starter kit keeps files at the project root,
  but that layout is optional. Keep the current structure and path aliases.
- Change my custom components, styles, or theme values beyond import paths and
  the file input change in step 5.
- Add the starter kit's example features (articles, ContentEntryDemo, tenant
  theme loading) unless I ask.

When you're done:
- Run the TypeScript check and `next build`, and fix any errors.
- Check that every server file calling sdk.* initializes the SDK first in the
  same function, before any parallel calls.
- Search the codebase for "website-builder-nextjs", "@webiny/sdk\"", "contentSdk."
  and "NEXT_PUBLIC_WEBSITE_BUILDER" and confirm nothing is left (yarn.lock and
  folder names don't count).
- Summarize what you changed and list anything you were unsure about.

// ❌ 6.4
import {
  contentSdk,
  type WebsiteBuilderThemeInput,
} from "@webiny/website-builder-nextjs";
import { registerComponentGroups } from "./groups";

export const initializeContentSdk = ({
  tenantId,
  preview,
  theme,
}: ContentSdkOptions = {}) => {
  contentSdk.init(
    {
      apiKey: String(process.env.NEXT_PUBLIC_WEBSITE_BUILDER_API_KEY),
      apiHost: String(process.env.NEXT_PUBLIC_WEBSITE_BUILDER_API_HOST),
      apiTenant:
        tenantId ?? String(process.env.NEXT_PUBLIC_WEBSITE_BUILDER_API_TENANT),
      preview,
      theme,
    },
    registerComponentGroups,
  );
};

// ✅ 6.5
import { sdk, type WebsiteBuilderThemeInput } from "@webiny/sdk-nextjs";
import { componentGroups } from "./groups";

export const initializeSdk = ({
  tenantId,
  preview,
  theme,
}: SdkOptions = {}) => {
  sdk.init({
    endpoint: String(process.env.NEXT_PUBLIC_WEBINY_API_HOST),
    token: String(process.env.NEXT_PUBLIC_WEBINY_API_KEY),
    tenant: tenantId ?? String(process.env.NEXT_PUBLIC_WEBINY_API_TENANT),
    preview,
    wb: { theme, componentGroups },
  });
};

// ❌ 6.4
const page = await contentSdk.getPage(path);

// ✅ 6.5
const result = await sdk.wb.getPage(path);
const page = result.isOk() ? result.value : null;

Add the Webiny SDK (Webiny 6.5) to this existing Next.js App Router app so it can
render Webiny Website Builder pages and support live editing in the Webiny editor.

Reference implementation (read these files before changing anything):
https://github.com/webiny/website-builder-nextjs/tree/starter-kit-6.5.x
Most relevant: middleware.ts, next.config.ts, app/layout.tsx,
app/(site)/[[...slug]]/page.tsx, app/api/preview/route.ts,
app/api/redirects/route.ts, sdk/*, components/DocumentRenderer.tsx,
editorComponents/index.tsx, theme/theme.ts, theme/theme.css, utils/normalizeSlug.ts,
utils/SlugNormalizer.ts, constants.ts.

Webiny pages should be served under: <PAGES_ROUTE>

First, inspect the app and tell me:
- the Next.js version, whether it uses the App Router, and whether a src/ folder is used
- whether a middleware.ts already exists and what it does
- whether a catch-all route would conflict with existing routes under <PAGES_ROUTE>
- how global styles and fonts are loaded
Then make these changes, adapting paths to this project's structure:

1. Install @webiny/sdk-nextjs@~6.5.0 with the package manager this project
   already uses. It needs Next.js 15 and React 19. Next.js 16 isn't supported
   yet. If the app is on a different major version, stop and tell me.

2. Environment variables. Add to .env.example (never commit real values):
     NEXT_PUBLIC_WEBINY_API_KEY=
     NEXT_PUBLIC_WEBINY_API_HOST=
     NEXT_PUBLIC_WEBINY_API_TENANT=root
     NEXT_PUBLIC_WEBINY_ADMIN_HOST=
   I'll get the values from the "Configure Frontend" dialog in Webiny Admin.

3. SDK setup. Create an sdk/ folder (or src/sdk/) modeled on the reference:
   - initializeSdk.ts: calls sdk.init({ endpoint, token, tenant, preview,
     wb: { theme, componentGroups } }) from "@webiny/sdk-nextjs", reading the
     NEXT_PUBLIC_WEBINY_* variables.
   - SdkInitializer.ts: a "use client" component that calls initializeSdk with
     the draft mode flag, theme, and tenant id.
   - getTenant.ts: reads the X-Tenant request header, defaulting to "root".
   - groups.ts: a componentGroups array with at least one group.

4. Theme. Create theme/theme.css that starts with
   @import "@webiny/sdk-nextjs/lexical.css"; and defines the CSS variables the
   editor should know about, and theme/theme.ts that exports `css` and
   `theme = createTheme({...})` exactly as in the reference. Base the colors,
   fonts, and typography on the styles this app already uses, not on the
   reference values.

5. next.config.ts. Merge these into the existing config without removing
   anything:
   - injectThemeCss from "@webiny/sdk-nextjs/webpack.js" and its webpack
     plugins, pointed at theme/theme.css.
   - A Content-Security-Policy header "frame-ancestors http://localhost:3001
     <NEXT_PUBLIC_WEBINY_ADMIN_HOST values>" so Webiny Admin can embed the app.
     If a CSP header already exists, add frame-ancestors to it.
   - images.remotePatterns for the NEXT_PUBLIC_WEBINY_API_HOST hostname.
   - config.externals entries for "thread-stream" and "pino-pretty".
   If next.config is not async yet, convert it to an async function as in the
   reference.

6. Middleware. Port the reference middleware.ts logic:
   - wb.preview=true or wb.editing=true query params enable draft mode via
     /api/preview, and disable it when the params are gone.
   - wb.tenant query param sets the X-Tenant request header.
   - Redirect lookup through /api/redirects.
   If a middleware already exists, merge this logic into it and keep its current
   behavior. Keep the matcher from excluding the app's existing needs.

7. API routes. Add app/api/preview/route.ts and app/api/redirects/route.ts from
   the reference, and constants.ts (trailingSlash, redirectsCacheTtl).

8. Page route. Add an optional catch-all route under <PAGES_ROUTE> based on
   app/(site)/[[...slug]]/page.tsx:
   - Initialize the SDK with the draft mode flag at the top of each function,
     before any SDK call (including calls run in parallel),
     including in generateStaticParams and generateMetadata.
   - Fetch with sdk.wb.getPage(path) and handle the Result (result.isOk()).
   - Render through a DocumentRenderer wrapper (components/DocumentRenderer.tsx
     in the reference) that uses SSR normally and disables SSR when the
     wb.editing query param is "true".
   - If <PAGES_ROUTE> is not "/", strip the prefix before calling getPage, and
     map paths from sdk.wb.listPages() back into the prefix in
     generateStaticParams.
   - Skip the language selector and multi-language logic unless I ask for it.

9. Root layout. In the root layout, call initializeSdk with the draft mode flag
   and tenant id, add <style>{css}</style> to <head>, and render <SdkInitializer
   draftMode={isEnabled} theme={theme} tenantId={tenantId} /> as the first child
   of <body>. Keep everything else in the layout.

10. Editor components. Create editorComponents/index.tsx with one simple example
    component registered with createWbComponent(Component, { name, label,
    inputs }) and createTextInput. Tell me which of my existing components would
    make good editor components, but don't register them yet.

Do not:
- Change existing routes, pages, or components beyond what is listed above.
- Copy the reference's example features (articles, ContentEntryDemo, tenant theme
  loading, Header, LanguageSelector).
- Put real credentials in any committed file.

When you're done:
- Run the TypeScript check and `next build`, and fix any errors.
- Summarize every file you added or changed, and explain how to test: start the
  dev server, set Frontend Domain in Webiny Admin's "Configure Frontend" dialog
  to the dev server URL, create and publish a page, and open it.

const result = await sdk.cms.listEntries({
  modelId: "article",
  where: { values: { slug } },
  limit: 1,
});