相关疑难解决方法(0)
为什么将 Next.js API 路由与外部 API 结合使用？
我是 Next.js 的新手。我想知道 的用途是什么，export default function handler因为我们可以使用 直接调用API fetch。
在我的 HTML 代码中，我放置了以下代码。当我单击submit按钮时sendformData()，将调用函数。
<input type="button" value="Submit" onClick={() => this.sendformData()} ></input>
sendformData = async () => {
const res = await fetch("/api/comments/getTwitFrmUrl?twitUrl=" + this.state.twitUrl, {
headers: {
"Content-Type": "application/json",
},
method: "GET",
});
const result = await res.json();
this.setState({ data: result.data });
};
当sendformData函数被调用时，它会调用/api/comments/文件并调用该函数。
这是/api/comments/[id].js文件代码。
export default async function handler(req, res) {
if (req.query.id == 'getTwitFrmUrl') {
const resData …推荐指数
解决办法
查看次数
使用 getServerSideProps 获取内部 API？（下一个.js）
我是 Next.js 的新手，我正在尝试理解建议的结构并处理页面或组件之间的数据。
例如，在我的页面中home.js，我获取了一个调用的内部 API /api/user.js，它从 MongoDB 返回一些用户数据。我通过使用fetch()从 inside 调用 API 路由来做到这一点getServerSideProps()，它在一些计算后将各种道具传递给页面。
根据我的理解，这对 SEO 有好处，因为道具在服务器端被获取/修改，页面让它们准备好呈现。但后来我的Next.js文档，你不应该用在阅读fetch()到所有的API路线getServerSideProps()。那么我应该怎么做才能遵守良好的实践和良好的 SEO？
我没有home.js在 API 路由本身中进行所需计算的原因是我需要来自这个 API 路由的更多通用数据，因为我也会在其他页面中使用它。
我还必须考虑缓存，哪个客户端使用 SWR 来获取内部 API 非常简单，但服务器端我还不确定如何实现它。
home.js：
export default function Page({ prop1, prop2, prop3 }) {
// render etc.
}
export async function getServerSideProps(context) {
const session = await getSession(context)
let data = null
var aArray = [], bArray = [], cArray = []
const { …推荐指数
解决办法
查看次数
FetchError：请求 http://localhost:3000/api/projects 失败，原因：connect ECONNREFUSED 127.0.0.1:3000 (Express/Next.Js)
我有一个 API 路由，可根据请求在加载项目页面（组件）时获取我想要的数据，如下所示。
http://localhost:3000/api/projects
当我打开，我该数据中请求页面getInitialProps()内pages/projects.js它显示的数据未来通过这就是我想要的，如下图所示，到目前为止，一切顺利。
代码在这里：
页面/项目.js
import React, { Component } from "react";
import Layout from "../components/Layout";
import Siema from "siema";
import Head from "next/head";
import fetch from "isomorphic-unfetch";
export default class extends React.Component {
componentDidMount() {
this.siema = new Siema({
loop: false
});
}
prev = () => {
this.siema.prev();
};
next = () => {
this.siema.next();
};
render() {
return (
<Layout>
<Head>
<title>Jesal Patel ? Projects</title>
</Head>
<div className="container"> …推荐指数
解决办法
查看次数
ECONNREFUSED 在“下一个构建”期间。与“下一个开发者”配合良好
我有一个非常简单的 NextJS 9.3.5 项目。目前，它有一个页面/用户和一个pages/api/users从本地 MongoDB 表中检索所有用户的页面
它使用“next dev”在本地构建良好但是，它在“next build”失败并出现ECONNREFUSED错误
页面/用户
import fetch from "node-fetch"
import Link from "next/link"
export async function getStaticProps({ params }) {
const res = await fetch(`http://${process.env.VERCEL_URL}/api/users`)
const users = await res.json()
return { props: { users } }
}
export default function Users({ users }) {
return (
<ul>
{users.map(user => (
<li key={user.id}>
<Link href="/user/[id]" as={`/user/${user._id}`}>
<a>{user.name}</a>
</Link>
</li>
))}
</ul>
);
}
页面/api/用户
import mongoMiddleware from "../../lib/api/mongo-middleware";
import apiHandler from "../../lib/api/api-handler";
export …推荐指数
解决办法
查看次数
Next JS 中预渲染页面时发生错误
我在下一个 JS（在文件夹中）中创建了一个 API pages/api，并在文件夹中的页面上使用了它pages。
当我在localhost上运行时（开发阶段），可以正确调用API。但是当我部署到 Vercel 时，构建过程中出现错误。
pages/api这是我调用文件夹中的 API 时的代码
export const getStaticProps = async () => {
const baseUrlDribble = 'https://api.dribbble.com/v2';
const baseUrl = process.env.NODE_ENV === 'production' ?
'https://jovanka-samudra.vercel.app/api' : 'http://localhost:3000/api';
const resShots = await fetch(`${baseUrlDribble}/user/shots?access_token=${process.env.TOKEN_DRIBBLE}&page=1&per_page=9`);
const shots = await resShots.json();
const resResult = await fetch(`${baseUrl}/projects`);
const result = await resResult.json();
const projects = result.data.projects;
return {
props: {
shots,
projects,
},
revalidate: 1,
}
}
pages/api/projects这是从数据库（文件夹）检索数据的API代码
import ProjectService from "@services/ProjectService";
import connectDB from …推荐指数
解决办法
查看次数
Nextjs 找不到内部 api 链接
我无法使用内部路径来获取我的内部 api 数据 错误说
TypeError: Failed to parse URL from /api/hello**
------------
export async function getStaticProps() {
const data = await fetch("/api/hello"
...
------------
但如果我像这样使用完整的网址（硬代码），它就会起作用
export async function getStaticProps() {
const data = await fetch("http://localhost:3000/api/hello"
...
有人知道如何使用内部路径而不是完整网址吗？
推荐指数
解决办法
查看次数
NEXT JS TypeError：无法从 /api/projects 解析 URL 或错误：连接 ECONNREFUSED 127.0.0.1:3000
我在用着
export const getStaticProps = async () => {
export const getStaticPaths = async () => {
并访问我的 api (pages/api/proyects/) 在本地主机中使用 next js 创建
const res = await fetch("http://localhost:3000/api/projects");
当我在 netlify 中构建应用程序时，出现此错误 connect ECONNREFUSED 127.0.0.1:3000 所以我尝试将 url 更改为“/api/projects/”
const res = await fetch("/api/projects/");
但我收到一个新错误“TypeError: 无法从 /api/project 解析 URL”，这就是说下一个 js 需要一个完整的 url 来访问数据，
我在 netlify 中的最终 URL 是https://v2ds.netlify.app，所以我认为我需要首先运行我的 api，但是如果要运行我的 api 我需要部署我的应用程序，我该怎么做？
“netlify 想要这个：”
const res = await fetch("https://v2ds.netlify.app/api/projects/");
但是如果应用程序不是第一次构建，我如何访问 api？我正在使用 getStaticProps、getStaticPaths mongoose 和 next js 的 API
所以最后一个问题是我如何将我的应用程序部署到 netlify …
推荐指数
解决办法
查看次数
NextJS API | 应用程序可以在部署和开发模式下运行，但当我运行下一个构建时却不能运行 | 经济拒绝
描述错误
我使用 NextJS 构建了一个具有内部 API 的应用程序，并使用 getStaticProps 方法来查询 API。
您可以在此处找到已部署的应用程序：https://tailor-challenge.vercel.app/
还有 github 存储库：在此处输入链接描述
该应用程序在开发模式下运行良好，我在 Vercel 中进行的部署也可以运行。但是当我运行下一个构建命令时，出现以下错误：
Build error occurred
FetchError: request to http://localhost:3000/api/restaurants failed, reason: connect ECONNREFUSED 127.0.0.1:3000
at ClientRequest.<anonymous> (/home/silinde87/Jobs/tailor/TailorChallenge/node_modules/node-fetch/lib/index.js:1461:11)
at ClientRequest.emit (node:events:376:20)
at Socket.socketErrorListener (node:_http_client:474:9)
at Socket.emit (node:events:376:20)
at emitErrorNT (node:internal/streams/destroy:188:8)
at emitErrorCloseNT (node:internal/streams/destroy:153:3)
at processTicksAndRejections (node:internal/process/task_queues:80:21) {
type: 'system',
errno: 'ECONNREFUSED',
code: 'ECONNREFUSED'
}
info - Collecting page data .npm ERR! code 1
npm ERR! path /home/silinde87/Jobs/tailor/TailorChallenge
npm ERR! command failed
npm ERR! command sh …推荐指数
解决办法
查看次数