Next.js + Supabase Edge Functions Configuration Guide

When using Supabase Edge Functions (Deno runtime) within a Next.js project, you need to configure three files to prevent build errors and linting issues. The main problem is that Next.js uses Node.js/TypeScript while Supabase functions use Deno, which have different global APIs.

Files to Update

1. `tsconfig.json` - Exclude Supabase Functions from TypeScript Compilation

Add the supabase/functions/** directory to the exclude array to prevent TypeScript from trying to compile Deno code during the Next.js build process.

{
  "compilerOptions": {
    // ... your existing options
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "supabase/functions/**"
  ]
}

2. `next.config.ts` - Exclude Supabase Functions from Build Process

Add webpack configuration to ignore the Supabase functions directory during the build and watch processes.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // ... your existing config options

  // Exclude supabase functions from the build
  webpack: (config) => {
    // Ignore supabase functions directory during development watching
    config.watchOptions = {
      ...config.watchOptions,
      ignored: ["**/supabase/functions/**"],
    };

    return config;
  },
};

export default nextConfig;

3. `eslint.config.mjs` - Add Deno Environment Configuration

Add a separate ESLint configuration for Supabase functions to provide proper Deno globals and prevent linting errors.

export default [
  {
    // ... your existing Next.js ESLint config
    ignores: ["supabase/functions/**"], // Add this to ignore Supabase functions from main config
    // ... rest of your existing config
  },
  // Add this new configuration object for Supabase Edge Functions
  {
    name: "ESLint Config - Supabase Functions (Deno)",
    languageOptions: {
      ecmaVersion: 2022,
      sourceType: "module",
      globals: {
        ...globals.es2022,
        // Deno globals
        Deno: "readonly",
        // Web API globals that Deno supports
        Response: "readonly",
        Request: "readonly",
        Headers: "readonly",
        URL: "readonly",
        URLSearchParams: "readonly",
        FormData: "readonly",
        Blob: "readonly",
        File: "readonly",
        ReadableStream: "readonly",
        WritableStream: "readonly",
        TransformStream: "readonly",
        fetch: "readonly",
        console: "readonly",
        crypto: "readonly",
        TextEncoder: "readonly",
        TextDecoder: "readonly",
        atob: "readonly",
        btoa: "readonly",
        setTimeout: "readonly",
        clearTimeout: "readonly",
        setInterval: "readonly",
        clearInterval: "readonly",
      },
    },
    files: ["supabase/functions/**/*.{js,ts}"],
    rules: {
      "no-unused-vars": ["error", { varsIgnorePattern: "^_" }],
      "no-undef": "error",
      "no-redeclare": "error",
      "simple-import-sort/imports": "error",
      "simple-import-sort/exports": "error",
    },
  },
];

Why These Changes Are Needed

TypeScript Compilation: Next.js tries to compile all .ts files, but Supabase functions use Deno APIs that don't exist in Node.js
Build Process: The webpack configuration ensures the functions directory is ignored during development and build
Linting: ESLint needs to know about Deno globals like Deno, Response, etc., to avoid "undefined" errors

Result

After making these changes:

✅ No TypeScript compilation errors during npm run build
✅ No ESLint errors in Supabase function files
✅ Next.js and Supabase functions can coexist in the same repository
✅ Functions are deployed separately using supabase functions deploy

Project Structure

Your project structure should look like this:

your-project/
├── app/                    # Next.js app directory
├── components/            # React components
├── lib/                   # Utilities
├── supabase/
│   ├── functions/         # Edge functions (Deno runtime)
│   │   └── hello-world/
│   │       └── index.ts
│   ├── migrations/
│   └── config.toml
├── eslint.config.mjs      # ESLint configuration
├── next.config.ts         # Next.js configuration
├── tsconfig.json          # TypeScript configuration
└── package.json

findmory/supabase-functions-nextjs-config.md