useSWR with Next.js api and nested routes

[leo-fe99]

Hi guys,
I'm trying to use useSWR("api/foo", fetcher) inside my next.js app.
Here the file structure:

Everything works under the first nested route http://localhost:3000/matching-engine

import useSWR from "swr";
import styles from "../../styles/Home.module.css";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import Authentication from "../../components/Authentication";
import { useUser } from "@supabase/auth-helpers-react";

function MatchingEngineEvents() {
  const fetcher = (...args) => fetch(...args).then((res) => res.json());
  const { data, error } = useSWR("api/matching-engine", fetcher);
  if (error) <h2>Error...</h2>;
  if (!data) return <h2>Loading...</h2>;
  if (data) {
    return (
      <div className={styles.matchingEngineEventGrid}>
           stuff
      </div>
    );
  }
}
const MatchingEngine = () => {
  const { user } = useUser();
  if (user === null) return <Authentication />;
  if (user.aud === "authenticated") {
    return (
      <div className={styles.container}>
        stuff
      </div>
    );
  }
};

export default MatchingEngine;

But if i try to replicate the logic inside a nested route (http://localhost:3000/matching-engine/test) it doesn't work:

import useSWR from "swr";

const Test = () => {
  const fetcher = (...args) => fetch(...args).then((res) => res.json());
  const { data, error } = useSWR("api/matching-engine", fetcher);
  if (error) <h2>Error...</h2>;
  if (!data) return <h2>Loading...</h2>;
  if (data) {
    return <div>this is a test</div>;
  }
};

export default Test;

Because it is looking at http://localhost:3000/matching-engine/api/matching-engine and it doesn't exist.

I suppose that the problem is in

const fetcher = (...args) => fetch(...args).then((res) => res.json());

Someone has ideas?

[Ultrasonic1209]

You should be using useSWR("/api/foo", fetcher).
The / at the very beginning is important as it signals to the browser to start from the root of the website, not from wherever your path happens to be.

[leo-fe99]

Thanks man, you made my day!