javascript - 如果用户没有会话，我如何使用 NextJs13、NextAuth 和 t3 堆栈重定向他们？

我使用带有 NextAuth 和 tRPC 的 t3 堆栈自启动了我的项目。当用户未登录时，我希望将他们重定向到主页或登录页。看起来 tRPC 并不是为返回重定向而设计的。基于 t3 起始代码，我如何添加重定向？

这是我在组件中拥有的内容

import { useSession } from "next-auth/react"; import { redirect } from 'next/navigation'; ... const MyPage

阅读更多 →

node.js - 在 NextJs 13.2 路由处理程序（app/route）中使用 NextApiResponse 辅助工具

在之前的 pages/api 方法中，处理程序的写法是 handler(req: NextApiRequest, res: NextApiResponse)。在 NextJs 13.2 中，他们在 app/api/route 引入了路由处理程序，对于 POST 请求的处理程序写法是 POST(req: NextRequest): NextResponse。

嗯，当我在按需 ISR 重新验证时遇到了这个限制。这是我的情况：

export default async function handler(req: NextApiRequest, res: NextApiResponse) { // (...) await res.revalidate('/projects'); res.status(200).json({ revalidated: true }); }

我正在尝试重构到 N

阅读更多 →

reactjs - React/NextJS：重复的音频波形元素

我正在用 NextJS 构建一个 消息应用程序，并带有 TTS 功能。为了可视化正在播放的音频波形，我正在使用一个名为 wavesurfer.js 的第三方库。

虽然实现和音频播放都正常，但我当前的方法渲染了两个 <wave> 元素，其中只有一个在技术上正常工作，这破坏了用户界面布局。

使用浏览器检查工具手动移除多余的<wave>文件可以显示组件应有的正确显示，但我无法确定是什么原因导致了另一个<wave>元素的重复生成。

阅读更多 →

reactjs - 如何在 nextjs 中使用 @portabletext/react npm 与 sanity.io 实现嵌套列表

当我想在 Next.js 中使用 @portabletext/react 包实现嵌套列表时，我遇到了困难，我需要在不同的条件下显示我的列表（在这种情况下使用项目符号列表）。在正常情况下显示为第一张图片，而在另一种情况下显示为第二张图片。以下是我用于 富文本组件的代码。

import Image from 'next/image'; import urlFor from '../lib/urlFor'; import Link from 'next/link'; import { PortableTextReactComponents } from '@portabletext/react'; import CodeBlock from './CodeBlock'; export const RichText: Partial<PortableTextReactComponents> = { types: { image: ({

阅读更多 →

typescript - 在 NextJS 中使用 ts-loader 自定义转换器

我已经爱上了 ts-runtime-checks 库，并且想把它整合到我的 NextJS 项目中：问题是它是一个代码转换器（会改变代码的编译方式），需要在主 TypeScript 编译之前运行。有没有办法将这个插件干净地挂载到 NextJS 的编译过程里？

如果使用 ts-loader 进行编译，这个库有一个良好且易于设置的方式。根据他们的文档，具体如下：

const TsRuntimeChecks = require("ts-runtime-checks").default; options: { getCustomTransformers: program => { before: [TsRuntimeChecks(program)] } }

我在这个问题中看到，有一种方法可以通过修改项目的 next.config 来调用 ts-loader

阅读更多 →

typescript - 使用 Nextjs 13.4、next-auth ^4.22.1 和 @next-auth/prisma-adapter ^1.0.6 时出现 "GetUserByAccountError"

在使用 Github 或 Google 通过 SocialLogin 登录时，是什么导致了 GetUserByAccountError？以下是更详细的错误信息：

Unknown arg `provider_providerAccountId` in where.provider_providerAccountId for type AccountWhereUniqueInput. Did you mean `providerId_providerAccountId`? Available args: type AccountWhereUniqueInput { id?: String providerId_providerAccountId?: AccountProviderId_providerAccountIdCompoundUniqueInput } Error: Invalid `prisma.account.findUnique()` invocation: { where: { provi

阅读更多 →

javascript - 在 NextJS 13 应用中，你如何生成读取本地数据的静态页面？

我完成了他们的博客教程，它运行得很好。它从本地存储的 .md 博客文章创建动态页面。很漂亮。

但我在尝试进行看似简单的修改时碰到了障碍。

我想为博客文章添加搜索和过滤功能。为此，我们需要“use client”。而 fs 模块在客户端无法使用。他们的文档建议使用 fetch API，但这在本地文件上不起作用，因为它们不是 URL。使用 /app 路由时 getStaticProps() 已被弃用，我相信在以前的版本中我可以运行它，并在构建时运行我的 fs 函数

这是需要运行的两个函数之一。

export async function getPostData(id: string) { const fullPath = path.join(process.cwd(), `/public/posts/${id}.md`); const fileContents = fs.readFileSync(fullPat

阅读更多 →

typescript - NextJS - API 路由总是返回状态码 200

对 nextjs 比较新，我在尝试获取 API 时遇到了一个问题。这个 API 本身相当简单，会检查是否存在会话（用户是否已登录），然后用 GET 返回一个 JSON。这是 getGoal/route.ts API 文件：

import { getAuthSession } from "@/lib/auth"; import { db } from "@/lib/db"; export async function GET(req: Request) { try { // Get the user session using NextAu

阅读更多 →

next.js - 使用 NextJS、ccxt 和 TypeScript 从 Binance 获取余额

我正在尝试在我的 NextJS 13 应用程序中获取 Binance 的余额，该应用程序使用 /src/app 目录和 TypeScript。

async function getData() { const exchange = new ccxt.binance ({ "apiKey": "mykey", "secret": "mysecret", }) return exchange.fetchTotalBal

阅读更多 →

node.js - 在使用 Nextjs 13 应用路由处理程序的 http-proxy 时出现 TypeError: req.on 不是一个函数

我正在尝试使用路由处理程序在 Nextjs 13 应用路由器和外部 API 之间实现一个代理

import { authOptions } from "@/modules/auth/utils/auth"; import httpProxy from "http-proxy"; import { getServerSession } from "next-auth"; import { NextRequest, NextResponse } from "next/server"; const ProxyHandler = async (req: NextRequest, res: NextResponse) => { const session = await getServerSession(authOptions); return new Promise((resolve, reject) => { const proxy: httpProx

阅读更多 →