Deploy Nextjs app with Clerk Authentication on Azure Static Web App (Free Plan)

Question

Hi
I deployed Nextjs app with Clerk Authentication on Azure Static Web App, but it is not loading, Is there any configuration to make to connect with 'CLERK' (https://clerk.com/).

Thanks

Answer 1

Hi Nilantha Samararathna,

You're deploying a Next.js app with Clerk on Azure Static Web Apps (Free Plan), but it's not loading because Clerk's dynamic features and environment variables need special setup that the free tier doesn't fully support by default.

Clerk works on Azure Static Web Apps (even Free tier) if you set up routes and environment variables manually. Use Next.js 13+ App Router for better support, and test locally with Azure SWA CLI npm install -g @azure/static-web-apps-cli before deploying.

• Please set below environment variables in Azure by -> opening your Static Web App -> going to Configuration -> Application settings -> adding keys like CLERK_PUBLISHABLE_KEY -> then saving and redeploying.

1. CLERK_PUBLISHABLE_KEY
2. CLERK_SECRET_KEY (for SSR or API routes)
3. NEXT_PUBLIC_CLERK_FRONTEND_API
4. NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
5. CLERK_API_KEY

• Update Clerk Dashboard Settings by logging into your Clerk dashboard and navigate to Configure → Domains to add your Azure Static Web App domain (e.g., https://your-app-name.azurestaticapps.net). Then, update the Allowed Redirect URLs to include your app’s main URL, sign-in URL, and any other routes you use.
• Add Clerk Middleware by installing the Clerk SDK (npm install @clerk/nextjs) and creating a middleware.js file in your project root with the required code to enable server-side authentication handling.

import { authMiddleware } from "@clerk/nextjs";
export default authMiddleware();
export const config = {
  matcher: ["/((?!_next/static|favicon.ico).*)"],
};

• Make sure your Next.js API routes (such as Clerk’s auth endpoints) are inside the /api folder and optionally update staticwebapp.config.json to manage routing.

{
  "routes": [
    {
      "route": "/api/*",
      "allowedRoles": ["anonymous"]
    },
    {
      "route": "/*",
      "rewrite": "/index.html"
    }
  ]
}

• In your next.config.js, avoid using output: 'export' and keep server-side rendering turned on.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};
module.exports = nextConfig;

https://learn.microsoft.com/en-us/azure/static-web-apps/configuration

https://learn.microsoft.com/en-us/azure/static-web-apps/deploy-nextjs-hybrid

https://clerk.com/docs/references/nextjs/overview

Please accept as "Yes" if the answer provided is useful, so that you can help others in the community looking for remediation for similar issues.

Let me know if you have any further Queries.