小编jul*_*ves的帖子
警告：文本内容不匹配。服务器：“我出去了” 客户端：“我进来了” div
我universal-cookie在 Next.js 项目中使用这个简单的代码，在控制台中返回警告：
import React, { useState } from "react";
import Cookies from "universal-cookie";
import styles from "../styles/Home.module.css";
export default function Home() {
const cook = new Cookies();
const [session, setSession] = useState(cook.get("key"));
const setCookie = () => {
cook.set("key", "hola", { secure: true });
setSession(cook.get("key"));
};
const deleteCookie = () => {
cook.remove("key", { secure: true });
setSession(undefined);
};
return (
<div className={styles.container}>
<button onClick={() => setCookie()}>Save Cookie</button>
<button onClick={() => deleteCookie()}>Delete Cookie</button>
{session ? <>I'm in</> …推荐指数
解决办法
查看次数
接下来无法加载 SWC 二进制文件
尝试使用 nextjs npm run dev 运行命令时显示错误 - 无法加载 SWC 二进制文件，请在此处查看更多信息： https: //nextjs.org/docs/messages/failed-loading-swc。
我尝试卸载节点并使用版本 16.13 重新安装它，但没有成功，在 vercel 页面上，但到目前为止不成功。有小费吗？
另外，我注意到这是 NextJS 讨论页面上的一个当前问题，它与新的基于 Rust 的编译器有关，它比 Babel 更快。
推荐指数
解决办法
查看次数
NextJS 具有固定宽度和自动高度的图像组件
我正在使用 NextJS 图像组件。我希望图像填充 100% 宽度并采用保持纵横比所需的高度。我已经尝试了此代码的许多不同变体，但除非我在父 div 上定义固定高度，否则它将无法工作。
export default function PhotoCard({ img }: Props) {
return (
<div className="relative w-full h-32 my-2">
<Image alt={img.title} src={img.url} layout="fill" objectFit="cover" />
</div>
);
}
这是当前的行为
推荐指数
解决办法
查看次数
如何清除/删除 NextJs 中的缓存？
我有一个产品页面/products/[slug].js
我对 wordpress/graphql 站点使用增量静态生成：
export async function getStaticProps(context) {
const {params: { slug }} = context
const {data} = await client.query(({
query: PRODUCT_SLUG,
variables: { slug }
}));
return {
props: {
categoryName: data?.productCategory?.name ?? '',
products: data?.productCategory?.products?.nodes ?? []
},
revalidate: 1
}
}
export async function getStaticPaths () {
const { data } = await client.query({
query: PRODUCT_SLUGS,
})
const pathsData = []
data?.productCategories?.nodes && data?.productCategories?.nodes.map((productCategory) => {
if (!isEmpty(productCategory?.slug)) {
pathsData.push({ params: { slug: productCategory?.slug } …推荐指数
解决办法
查看次数
如何在 Next.js 中将数据从一个页面传递到另一个页面？
我遇到了将数据从 next.js 中的一个页面传递到另一个页面的问题，因为我正在构建一个基本的新闻应用程序，在该应用程序中我从新闻 api 获取 get 请求，并且获得了 10 篇文章的结果，并且我正确地映射了它们，但是我想将单篇文章日期传递到名为 singleNews 的新页面。那么我该怎么做呢？这是我获取所有 10 篇文章的地方：
export default function news({data}) {
// const randomNumber = (rangeLast) => {
// return Math.floor(Math.random()*rangeLast)
// }
// console.log(data)
return (
<>
<div>
<h1 className="heading">Top Techcrunch Headlines!</h1>
</div>
<div className={styles.newsPage}>
{ // here you always have to check if the array exist by optional chaining
data.articles?.map(
(current, index) => {
return(
<Card datas={current} key={index+current.author} imageSrc={current.urlToImage} title={current.title} author={current.author}/>
)
}
)
}
</div>
</>
)
}
export async …推荐指数
解决办法
查看次数
错误：补水时出现错误。由于错误发生在 Suspense 边界之外，因此整个根将切换到客户端渲染
我正在使用 Next.js 制作一个网站，每次都会显示上述错误。
不知道我的代码有什么问题。
const Login = () => {
const [userMsg, setUserMsg] = useState("");
const [email, setEmail] = useState("");
const router=useRouter();
const handleOnChangeEmail = (e) => {
e.preventDefault();
setUserMsg("");
console.log("event", e);
const email = e.target.value;
setEmail(email);
};
const handleLoginWithEmail = (e) => {
e.preventDefault();
if (email) {
if (IsEmail.validate(email)){
router.push("/")
}else{
setUserMsg("Enter a valid email address")
}
} else {
//show usermssg
setUserMsg("Enter an email address");
}
};
return (
<div className="bg-[url('/static/bglg.jpg')] flex items-stretch flex-col h-screen w-full">
<head>
<title>NeoVest …推荐指数
解决办法
查看次数
如何访问 Next.js 中 getServerSideProps 中的路由参数？
我想使用 slug 中的 ID 查询我的 Supabase 表，localhost:3000/book/1然后在 Next.js 的页面上显示有关该书的信息。
桌子
书/[id].js
import { useRouter } from 'next/router'
import { getBook } from '@/utils/supabase-client';
export default function Book({bookJson}) {
const router = useRouter()
const { id } = router.query
return <div>
<p>Book: {id}</p>
<h1>{bookJson}</h1>
</div>
}
export async function getServerSideProps(query) {
const id = 1 // Get ID from slug
const book = await getBook(id);
const bookJson = JSON.stringify(book)
return {
props: {
bookJson
}
};
}
utils/supabase-client.js
export …推荐指数
解决办法
查看次数
Next.js 中的 npm run dev 和 npm run start 有什么区别？
npm run dev我想知道和之间有什么区别npm run start。令我惊讶的是，我在网上找不到太多关于这个主题的信息。
具体来说，我想了解 React 和 Next JS 的背景。
我注意到，使用 React，您可以通过运行来启动应用程序npm run start，而无需先运行构建。另一方面，Next JS 的行为似乎并不相同（但我可能在设置上做错了）。我尝试使用 运行一个新的 Next 应用程序npm run start，因为它是 中的默认脚本package.json，但它不起作用。它显示此错误：*Error: Could not find a production build*
相反，运行npm run dev会创建一个 .next 文件夹，并在端口 3000 上启动服务器，没有出现任何问题。
谁能帮助我理解这是如何工作的？
推荐指数
解决办法
查看次数
如何在 Next.js API 路由中将 TypeScript 类型添加到请求正文？
问题
我喜欢使用 TypeScript 的主要原因之一是检查我是否将正确类型的参数传递给给定的函数调用。
但是，在使用 Next.js 时，我遇到了这样的问题：传递到 Next.js API 端点的参数在“降级”为该类型时最终会丢失其类型NextApiRequest。
通常，我会执行类似的操作req.body.[param_name]，但整个链都有类型any，因此我会丢失任何有意义的类型信息。
例子
假设我在 Next.js 项目中有一个 API 端点，pages/api/add.ts负责将两个数字相加。在此文件中，我们还有一个用于添加两个数字的类型化函数，API 端点将调用该函数。
const add = (a: number, b: number): number => a + b;
export default async (req: NextApiRequest, res: NextApiResponse) => {
try {
const result = add(req.body.number_one, req.body.number_two);
res.status(200).json(result);
} catch (err) {
res.status(403).json({ err: "Error!" });
}
};
我遇到的问题以及我想要帮助的问题是如何键入req.body.number_one和req.body.number_two/或来自请求对象的任何类型的参数。这可能吗？
由于请求对象的类型是anyTypeScript 不会抱怨，即使您尝试使用错误类型的参数调用 API 端点。
fetch("/api/add", {
method: "POST", …推荐指数
解决办法
查看次数
将 React.Context 与 Nextjs13 服务器端组件结合使用
Next13 一周前发布，我正在尝试将 next12 应用程序迁移到 next13。我想尽可能多地使用服务器端组件，但我似乎无法使用
import { createContext } from 'react';
在任何服务器组件中。
我收到此错误：
Server Error
Error:
You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
,----
1 | import { createContext } from 'react';
: ^^^^^^^^^^^^^
`----
Maybe one of these should be marked as a client entry with "use client":
这里有其他选择吗？还是我必须诉诸道具钻探来获得服务器端渲染？
推荐指数
解决办法
查看次数
标签 统计
next.js ×10
reactjs ×6
javascript ×2
tailwind-css ×2
apollo ×1
babeljs ×1
caching ×1
cookies ×1
mern ×1
nextjs-image ×1
npm ×1
npm-scripts ×1
supabase ×1
swc-compiler ×1
typescript ×1
wordpress ×1