javascript - How to get dynamic segment in Next.js 13 app router?

I want to fetch a data using API Router from Next.js 13 using MongoDB as my DBMS. Currently, I'm using the new App Router.

When I'm fetching all data from a collection it succeeded, but when I want to fetch only one data, it fails.

The error says

TypeError: Cannot read properties of undefined (reading 'id')
    at GET (webpack-internal:///(sc_server)/./app/api/shop/[id]/route.tsx:14:30)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:265:43)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/lib/trace/tracer.js:111:36)
    at NoopContextManager.with (webpack-internal:///(sc_server)/./node_modules/next/dist/piled/@opentelemetry/api/index.js:360:30)
    at ContextAPI.with (webpack-internal:///(sc_server)/./node_modules/next/dist/piled/@opentelemetry/api/index.js:30:58)
    at NoopTracer.startActiveSpan (webpack-internal:///(sc_server)/./node_modules/next/dist/piled/@opentelemetry/api/index.js:953:34)
    at ProxyTracer.startActiveSpan (webpack-internal:///(sc_server)/./node_modules/next/dist/piled/@opentelemetry/api/index.js:993:36)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/lib/trace/tracer.js:100:107)
    at NoopContextManager.with (webpack-internal:///(sc_server)/./node_modules/next/dist/piled/@opentelemetry/api/index.js:360:30)
    at ContextAPI.with (webpack-internal:///(sc_server)/./node_modules/next/dist/piled/@opentelemetry/api/index.js:30:58)
    at NextTracerImpl.trace (webpack-internal:///(sc_server)/./node_modules/next/dist/server/lib/trace/tracer.js:100:32)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:253:53)
    at AsyncLocalStorage.run (node:async_hooks:330:14)
    at Object.wrap (webpack-internal:///(sc_server)/./node_modules/next/dist/server/async-storage/static-generation-async-storage-wrapper.js:41:24)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:207:97)
    at AsyncLocalStorage.run (node:async_hooks:330:14)
    at Object.wrap (webpack-internal:///(sc_server)/./node_modules/next/dist/server/async-storage/request-async-storage-wrapper.js:77:24)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:206:75)
    at AsyncLocalStorage.run (node:async_hooks:330:14)
    at AppRouteRouteModule.execute (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:203:56)
    at AppRouteRouteModule.handle (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:326:41)
    at RouteHandlerManager.handle (D:\Projects\MyShop\node_modules\next\dist\server\future\route-handler-managers\route-handler-manager.js:28:29)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async doRender (D:\Projects\MyShop\node_modules\next\dist\server\base-server.js:996:38)
    at async cacheEntry.responseCache.get.incrementalCache.incrementalCache (D:\Projects\MyShop\node_modules\next\dist\server\base-server.js:1172:40)
    at async D:\Projects\MyShop\node_modules\next\dist\server\response-cache\index.js:99:36

Here is my code

/app/api/shop/[id]/route.tsx

import { connectToDatabase } from "@/lib/mongo";
import { NextRequest, NextResponse } from "next/server";
import { ObjectId } from "mongodb";

export async function GET (req : NextRequest, res : NextResponse) {
  try {
    const id = req.query.id;
    const client = await connectToDatabase();
    const db = client.db("MyShopDB");
    // console.log(req);
  
    const oneProduct = await db.collection("Products").findOne({ _id: ObjectId(id) });
  
    // return new Response(JSON.stringify(allProducts), { status: 200 });
    if(oneProduct)
      return NextResponse.json(oneProduct)
    else 
      return res.status(404).json({message: "Products Not Found"})
  } catch (error) {
    console.log(error);
    return new Response("Failed to fetch all prompts", { status: 500 })
  }
}

Here is code for fetching all products /app/api/shop/route.tsx

import { connectToDatabase } from "@/lib/mongo";
import { NextRequest, NextResponse } from "next/server";

export async function GET (req: NextRequest, res: NextResponse) {
  try {
    const client = await connectToDatabase();
    const db = client.db("MyShopDB");
    console.log(req);
  
    const allProducts = await db.collection("Products").find().toArray();
  
    // return new Response(JSON.stringify(allProducts), { status: 200 });
    return NextResponse.json(allProducts);
  } catch (error) {
    return new Response("Failed to fetch all prompts", { status: 500 })
  }
}

I want to fetch a data using API Router from Next.js 13 using MongoDB as my DBMS. Currently, I'm using the new App Router.

When I'm fetching all data from a collection it succeeded, but when I want to fetch only one data, it fails.

The error says

TypeError: Cannot read properties of undefined (reading 'id')
    at GET (webpack-internal:///(sc_server)/./app/api/shop/[id]/route.tsx:14:30)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:265:43)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/lib/trace/tracer.js:111:36)
    at NoopContextManager.with (webpack-internal:///(sc_server)/./node_modules/next/dist/piled/@opentelemetry/api/index.js:360:30)
    at ContextAPI.with (webpack-internal:///(sc_server)/./node_modules/next/dist/piled/@opentelemetry/api/index.js:30:58)
    at NoopTracer.startActiveSpan (webpack-internal:///(sc_server)/./node_modules/next/dist/piled/@opentelemetry/api/index.js:953:34)
    at ProxyTracer.startActiveSpan (webpack-internal:///(sc_server)/./node_modules/next/dist/piled/@opentelemetry/api/index.js:993:36)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/lib/trace/tracer.js:100:107)
    at NoopContextManager.with (webpack-internal:///(sc_server)/./node_modules/next/dist/piled/@opentelemetry/api/index.js:360:30)
    at ContextAPI.with (webpack-internal:///(sc_server)/./node_modules/next/dist/piled/@opentelemetry/api/index.js:30:58)
    at NextTracerImpl.trace (webpack-internal:///(sc_server)/./node_modules/next/dist/server/lib/trace/tracer.js:100:32)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:253:53)
    at AsyncLocalStorage.run (node:async_hooks:330:14)
    at Object.wrap (webpack-internal:///(sc_server)/./node_modules/next/dist/server/async-storage/static-generation-async-storage-wrapper.js:41:24)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:207:97)
    at AsyncLocalStorage.run (node:async_hooks:330:14)
    at Object.wrap (webpack-internal:///(sc_server)/./node_modules/next/dist/server/async-storage/request-async-storage-wrapper.js:77:24)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:206:75)
    at AsyncLocalStorage.run (node:async_hooks:330:14)
    at AppRouteRouteModule.execute (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:203:56)
    at AppRouteRouteModule.handle (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:326:41)
    at RouteHandlerManager.handle (D:\Projects\MyShop\node_modules\next\dist\server\future\route-handler-managers\route-handler-manager.js:28:29)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async doRender (D:\Projects\MyShop\node_modules\next\dist\server\base-server.js:996:38)
    at async cacheEntry.responseCache.get.incrementalCache.incrementalCache (D:\Projects\MyShop\node_modules\next\dist\server\base-server.js:1172:40)
    at async D:\Projects\MyShop\node_modules\next\dist\server\response-cache\index.js:99:36

Here is my code

/app/api/shop/[id]/route.tsx

import { connectToDatabase } from "@/lib/mongo";
import { NextRequest, NextResponse } from "next/server";
import { ObjectId } from "mongodb";

export async function GET (req : NextRequest, res : NextResponse) {
  try {
    const id = req.query.id;
    const client = await connectToDatabase();
    const db = client.db("MyShopDB");
    // console.log(req);
  
    const oneProduct = await db.collection("Products").findOne({ _id: ObjectId(id) });
  
    // return new Response(JSON.stringify(allProducts), { status: 200 });
    if(oneProduct)
      return NextResponse.json(oneProduct)
    else 
      return res.status(404).json({message: "Products Not Found"})
  } catch (error) {
    console.log(error);
    return new Response("Failed to fetch all prompts", { status: 500 })
  }
}

Here is code for fetching all products /app/api/shop/route.tsx

import { connectToDatabase } from "@/lib/mongo";
import { NextRequest, NextResponse } from "next/server";

export async function GET (req: NextRequest, res: NextResponse) {
  try {
    const client = await connectToDatabase();
    const db = client.db("MyShopDB");
    console.log(req);
  
    const allProducts = await db.collection("Products").find().toArray();
  
    // return new Response(JSON.stringify(allProducts), { status: 200 });
    return NextResponse.json(allProducts);
  } catch (error) {
    return new Response("Failed to fetch all prompts", { status: 500 })
  }
}

Share Improve this question edited Jul 1, 2023 at 18:00 juliomalves 50.6k23 gold badges178 silver badges169 bronze badges asked Jun 29, 2023 at 5:06 Michahide 331 silver badge4 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

The error is most likely caused by the access to req.query.id, which is not valid for a dynamic API route in the app folder.

When using a route handler with dynamic segments inside the app directory, the dynamic parameter can be accessed from the params property in the function's second parameter.

// `/app/api/shop/[id]/route.tsx`

import { type NextRequest } from 'next/server';

export async function GET(request: Request, { params }: { params: { id: string } }) {
    const id = params.id;
    console.log(id);
    // Rest of your API function
}

For more details see Route Handlers, Dynamic Route Segments documentation.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to get dynamic segment in Next.js 13 app router? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)