我正在开发一个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"
}
1条答案
按热度按时间4c8rllxm1#
NextJS的新版本有一个与从动态路由获取有关的错误。
尝试在routes.ts文件的末尾添加这一行:
更多信息here