Next.js: not able to use `/api` routes

[danilowoz]

Discussed in https://github.com/codesandbox/sandpack/discussions/808

^{Originally posted by ismaelrumzan March 6, 2023} Hi, I'm trying to set up an embed codesandbox for an API edge function code example. It works in the sandbox here: https://codesandbox.io/p/sandbox/hopeful-lake-4ncj08

When I try to use a similar example (JS version) in the code embed, I get failed to load in the preview. This is my code. Any suggestions?

import {
  SandpackProvider,
  SandpackLayout,
  SandpackCodeEditor,
  SandpackFileExplorer,
  SandpackPreview,
} from "@codesandbox/sandpack-react";

const filename = '/pages/api/hello.js';

const files={};

files[filename] = {
code: `import { NextResponse } from 'next/server';
export const config = {
    runtime: 'edge',
};

export default (req) => {
    return NextResponse.json({
      name: 'Hello now an Edge Function!',
    });
  };
  `,
};

  files['/pages/index.js'] = {
    code: `import useSwr from 'swr';
    const fetcher = (url) => fetch(url).then((res) => res.json());
    export default function Index() {
    const { data, error, isLoading } = useSwr('/api/hello', fetcher)

  if (error) return <div>Failed to load</div>
  if (isLoading) return <div>Loading...</div>
  if (!data) return null

  return (
  <div>Got data</div>
  )
}
    `
  }

export default () => (
  <SandpackProvider template="nextjs" files={files} customSetup={{
          dependencies: {
            swr: 'latest',
          },
        }}>
    <SandpackLayout>
      <SandpackFileExplorer />
      <SandpackCodeEditor />
      <SandpackPreview />
    </SandpackLayout>
  </SandpackProvider>
);

Reproducible sandbox: https://codesandbox.io/s/laughing-yalow-cb3c03?file=/src/App.tsx

[danilowoz]

@DeMoorJasper, could you please take a look at this issue?

[DeMoorJasper]

Yes, will have a look today