If using

@ory/client-fetch

in your Next.js app is causing unwanted server-side pre-processing (SSR/SSG) and you want to ensure the page is rendered entirely client-side—so you can use environment variables set at deploy time—there are a few approaches and alternatives you can consider, based on the Ory documentation and community discussions: 1. Use Client-Side Only Environment Variables Next.js only exposes environment variables prefixed with

NEXT_PUBLIC_

to the client side. Make sure you are using these for your Ory SDK base URL, e.g.,

NEXT_PUBLIC_ORY_SDK_URL

. Then, initialize the Ory client inside your React components or hooks, not at the module level, to avoid SSR/SSG picking it up.

js    import { FrontendApi, Configuration } from "@ory/client-fetch"     // Inside your component or a custom hook    const ory = new FrontendApi(      new Configuration({        basePath: process.env.NEXT_PUBLIC_ORY_SDK_URL,        credentials: "include",      })    )

This ensures the Ory client is only created in the browser, not during server-side rendering. [See example in Ory docs](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-ory-elements#run-the-sample-application) 2. Use Ory Elements Example as Reference The [Ory Elements React SPA example](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-ory-elements#run-the-sample-application) demonstrates how to set up a fully client-side rendered app with Ory. It uses Vite, but the same principle applies: environment variables are injected at build/deploy time and the SDK is only used client-side. 3. Avoid Importing SDK at the Top Level If you import and initialize the Ory SDK at the top level of a module, Next.js may try to bundle it for SSR. Instead, move the initialization inside a

useEffect

or a client-only hook/component. 4. Alternative: Use REST API Directly If the SDK continues to cause issues, you can always call the Ory REST APIs directly using

fetch

or another HTTP client from the browser. This gives you full control over when and how requests are made, and avoids any SSR/SSG entanglement. [This workaround is also mentioned in community discussions](https://github.com/ory/network/issues/379). 5. Check for a Fetch-Based SDK Ory provides a fetch-based SDK (

@ory/client-fetch

) specifically to address compatibility with edge environments and client-side rendering. If you are still experiencing issues, ensure you are using the latest version and that your import/initialization pattern is client-only. [See SDK options in the Ory API Reference](https://www.ory.sh/docs/reference/api). Summary: - Use

NEXT_PUBLIC_ORY_SDK_URL

and initialize the Ory client inside client-only code. - Reference the Ory Elements SPA example for a working pattern. - If issues persist, use the REST API directly from the client. If you need a concrete example or further guidance, let me know your specific setup (e.g., where you’re initializing the SDK), and I can help you refactor it for client-only rendering.

Certainly! Point 3 refers to avoiding importing and initializing the Ory SDK at the top level of a module in your Next.js app. This is important because when you import and initialize the SDK at the top level (outside of a function or React component), Next.js may include it in the server-side bundle and attempt to execute it during server-side rendering (SSR) or static site generation (SSG). This can lead to issues, especially if you want to use environment variables that are only available at runtime in the browser. How to work around this: - Initialize the Ory SDK inside a React component or hook, not at the module level. This ensures the SDK is only created in the browser, after the page has loaded, and not during SSR/SSG. For example, instead of this (which may cause SSR issues):

js // ❌ Top-level initialization (not recommended for client-only usage) import { FrontendApi, Configuration } from "@ory/client-fetch"  const ory = new FrontendApi(   new Configuration({     basePath: process.env.NEXT_PUBLIC_ORY_SDK_URL,     credentials: "include",   }) )

Do this (inside a component or hook):

js import { useEffect, useState } from "react" import { FrontendApi, Configuration } from "@ory/client-fetch"  export default function MyComponent() {   const [ory, setOry] = useState(null)    useEffect(() => {     const oryInstance = new FrontendApi(       new Configuration({         basePath: process.env.NEXT_PUBLIC_ORY_SDK_URL,         credentials: "include",       })     )     setOry(oryInstance)     // Now you can use `oryInstance` for API calls   }, [])    // ...rest of your component }

This pattern is also reflected in Ory's documentation and examples, where the SDK is configured using environment variables that are only available in the browser context, ensuring client-side only execution [see Ory Elements Next.js SPA example](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-ory-elements#run-the-sample-application). If you need to use the SDK in multiple places, you can create a custom hook or utility function that initializes it on the client side, rather than at the module level. Summary: By moving SDK initialization inside a client-only context (like a React component or hook), you prevent Next.js from including it in SSR/SSG, and you can safely use runtime environment variables.