I want to get the value regions through Next.js' App router, but I can't get the data. I'm getting 404 and I don't know what the problem is. Below is my code.

enter image description here enter image description here

// src/app/api/regions/rotue.ts
import { NextResponse } from "next/server";

const regions = [
  { label: "서울", value: "seoul" },
  { label: "경기", value: "gyeonggi" },
  { label: "인천", value: "incheon" },
  { label: "대전", value: "daejeon" },
  { label: "대구", value: "daegu" },
  { label: "부산", value: "busan" },
  { label: "울산", value: "ulsan" },
  { label: "광주", value: "gwangju" },
  { label: "세종", value: "sejong" },
  { label: "강원", value: "gangwon" },
  { label: "충북", value: "chungbuk" },
  { label: "충남", value: "chungnam" },
  { label: "전북", value: "jeonbuk" },
  { label: "전남", value: "jeonnam" },
  { label: "경북", value: "gyeongbuk" },
  { label: "경남", value: "gyeongnam" },
  { label: "제주", value: "jeju" },
];

export async function GET() {
  return NextResponse.json(regions);
}

// src/app/page.tsx
async function getRegions() {
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/regions`, {
    cache: "no-store",
  });

  if (!res.ok) {
    throw new Error("Failed to fetch regions");
  }

  return res.json();
}

export default async function Home() {
  const regions = await getRegions();

  return (
    <div>
      {regions.map((region) => (
        <div key={region.value}>{region.label}</div>
      ))}
    </div>
  );
}

Somebody help me...

Once you test/route.js on the link, it comes out well when you approach the url input window with api/test..

But it doesn't work when you approach the regions.

/

I want to get the value regions through Next.js' App router, but I can't get the data. I'm getting 404 and I don't know what the problem is. Below is my code.

enter image description here enter image description here

// src/app/api/regions/rotue.ts
import { NextResponse } from "next/server";

const regions = [
  { label: "서울", value: "seoul" },
  { label: "경기", value: "gyeonggi" },
  { label: "인천", value: "incheon" },
  { label: "대전", value: "daejeon" },
  { label: "대구", value: "daegu" },
  { label: "부산", value: "busan" },
  { label: "울산", value: "ulsan" },
  { label: "광주", value: "gwangju" },
  { label: "세종", value: "sejong" },
  { label: "강원", value: "gangwon" },
  { label: "충북", value: "chungbuk" },
  { label: "충남", value: "chungnam" },
  { label: "전북", value: "jeonbuk" },
  { label: "전남", value: "jeonnam" },
  { label: "경북", value: "gyeongbuk" },
  { label: "경남", value: "gyeongnam" },
  { label: "제주", value: "jeju" },
];

export async function GET() {
  return NextResponse.json(regions);
}

// src/app/page.tsx
async function getRegions() {
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/regions`, {
    cache: "no-store",
  });

  if (!res.ok) {
    throw new Error("Failed to fetch regions");
  }

  return res.json();
}

export default async function Home() {
  const regions = await getRegions();

  return (
    <div>
      {regions.map((region) => (
        <div key={region.value}>{region.label}</div>
      ))}
    </div>
  );
}

Somebody help me...

Once you test/route.js on the link, it comes out well when you approach the url input window with api/test..

But it doesn't work when you approach the regions.

https://blog.logrocket.com/using-next-js-route-handlers/

• javascript

1 Answer 1

You are using wrong filename in this src/app/api/regions/rotue.ts change /rotue.ts to route.ts.

As Next.js uses the file name route to define API routes, and the current file name causes the route to be unrecognized resulting in 404.