API路由在NextJS应用中不起作用(Firebase)

hsvhsicv  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(162)

我正在开发一个NextJS应用程序(在Firebase上),我想创建一个API路由来在实时数据库上执行一些特定的任务。
出于某种原因,我尝试过的东西没有奏效。希望各位Maven的眼睛能给我带来有益的帮助。
我从我所知道的已经在应用程序中工作的东西和我所知道的API路由开始。
首先,这里是我为这个应用程序编写的一些工作代码:

'use client';

    import { useState, useEffect } from 'react';
    import firebase from "../../firebase/initFirebase";
    import "./shopList.css";
    .....

    export default function THE_RecordList({}: {}) {
        const [dataRcdArray, setDataRcdArray] = useState<never[]>([]);
        .....
    
      useEffect(() => {
            firebase.database().ref('TheDataCollection')
            .on("value", snapshot => {
                // The next line avoids displaying multiple times the list, when reloading the page.
                setDataRcdArray([])
                snapshot.forEach((item:firebase.database.DataSnapshot) => {
            const rcdSnpSht = item as firebase.database.DataSnapshot
                
            if (rcdSnpSht.child('status').val() == 'D') return
                
            setDataRcdArray(arr => [...arr, item] as never[])
                })
            });
        }, [])
    }

然后下面是什么是不工作,我想工作。在 app 目录中,我创建了一个名为 API 的子目录,并在其中创建了 sroute(特殊路由)。下面是文件 app/API/sroute/routes.ts 的内容:

import {NextResponse} from 'next/server';
import firebase from "../../../firebase/initFirebase";

export async function GET(request: Request) {
  const paramName = 'number'
  const nbrPos = request.url.search(paramName) + paramName.length + 1
  const nbrStr = request.url.substring(nbrPos)
  const nbrVal = parseInt(nbrStr)

  if (isNaN(nbrVal)) {
    return NextResponse.json({
      error: 'A number must be provided, in the "'+paramName+'" parameter, for this API to work.'
    }, {status: 200});
  }

  if (nbrVal<=0) {
    return NextResponse.json({
      error: 'A strictly positive number must be provided, for this API to work.'
    }, {status: 200});
  }

    let nbrFound = -1

    firebase.database().ref('TheDataCollection')
  .on("value", snapshot => {
    snapshot.forEach((item:firebase.database.DataSnapshot) => {
      const rcdSnpSht = item as firebase.database.DataSnapshot

      if (rcdSnpSht.child('historicalOrder').val() != nbrVal) return

      nbrFound = rcdSnpSht.child('historicalOrder').val()
    })
  });

  if (nbrFound == nbrVal)
    return NextResponse.json({
      order: nbrVal,
      status: 'FOUND !!'
    }, {status: 200});
  else
    return NextResponse.json({
      order: nbrVal,
      status: 'NOTHING FOUND !!'
    }, {status: 200});
} /* End of GET */

最后一段代码不起作用。下面是我在运行命令的终端中得到的错误消息:

% npm run dev

    - error StaticGenBailoutError: Page with `dynamic = "error"` couldn't be rendered statically because it used `request.url`.
at Object.staticGenerationBailout (webpack-internal:///(sc_server)/./node_modules/next/dist/client/components/static-generation-bailout.js:27:15)
at handleReqBailout (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/helpers/proxy-request.js:93:23)
at Object.get (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/helpers/proxy-request.js:101:13)
at GET (webpack-internal:///(sc_server)/./app/api/close/route.ts:15:28)
at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:242: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/compiled/@opentelemetry/api/index.js:360:30)
at ContextAPI.with (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:30:58)
at NoopTracer.startActiveSpan (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:953:34)
at ProxyTracer.startActiveSpan (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/@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/compiled/@opentelemetry/api/index.js:360:30)
at ContextAPI.with (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/@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:230: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:39:24)
at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:184: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:183: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:180:56)
at AppRouteRouteModule.handle (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:303:41)
at RouteHandlerManager.handle (/Users/me/Documents/FireBase/njsapp/node_modules/next/dist/server/future/route-handler-managers/route-handler-manager.js:28:29)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async doRender (/Users/me/Documents/FireBase/njsapp/node_modules/next/dist/server/base-server.js:936:38)
at async cacheEntry.responseCache.get.incrementalCache.incrementalCache (/Users/me/Documents/FireBase/njsapp/node_modules/next/dist/server/base-server.js:1162:28)
at async /Users/me/Documents/FireBase/njsapp/node_modules/next/dist/server/response-cache/index.js:99:36 {
      code: 'NEXT_STATIC_GEN_BAILOUT'
    }

最后,如果这可能是有用的,这是我在 package.json 中的一部分:

"dependencies": {
    "@types/node": "20.2.6",
    "@types/react": "18.2.10",
    "@types/react-dom": "18.2.4",
    "autoprefixer": "10.4.14",
    "eslint": "8.42.0",
    "eslint-config-next": "13.4.4",
    "firebase": "^9.22.2",
    "next": "13.4.4",
    "postcss": "8.4.24",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.2",
    "typescript": "5.1.3"
  }
4c8rllxm

4c8rllxm1#

NextJS的新版本有一个与从动态路由获取有关的错误。
尝试在routes.ts文件的末尾添加这一行:

export const dynamic = "force-static";

更多信息here

相关问题