网站搜索
typescript - Nextjs Shadcn 表单，react-hook-form，zod 解析器点击时不提交
我在使用 Shadcn、React Hook Form 和 Zod resolver 的表单时遇到了问题。点击提交按钮时，代码不会进入 onSubmit 函数，什么也没有发生。我已经尝试了所有方法，更改了 Next.js 版本、Shadcn 版本等，但问题依然存在。下面，我提供代码：
const formSchema = z.object({ name: z.string().min(1, { message: "Name is required.", }), description: z.string().min(1, { message: "Description is required.", }), instructions: z.string().min(200, { message: "Instructions require at least 200 characters." }), seed: z.string().min(20 阅读更多 →reactjs - 使用 NextJS 中间件进行重定向，除了特定页面
我知道有很多关于这个话题的帖子，但没有专门针对这个问题的。
我正在使用 T3 堆栈，在我的应用程序开发过程中，我希望将所有客户端请求都定向到某个特定的路由，在这种情况下是 /signup。
我写了这个，这个是可行的：
export function middleware(request: NextRequest) { const url = request.nextUrl.clone() if (!url.pathname.startsWith('/signup') && // exlude the signup page to avoid redirect loop !url.pathname.startsWith('/_next') && // exclude Next.js internals !url.pathname.startsWith('/_axiom') && // exclude Ax 阅读更多 →javascript - 在 NextJS 的客户端和服务端组件中混合使用 useQuery 客户端
我在 NextJS 的服务器组件和客户端组件中混合使用 useQuery 查询客户端时遇到了问题。我有一个预取数据的服务器组件：
export default async function HouseholdChooser() { const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: ['households'], queryFn: getHouseholds, }); return ( <div className="grid flex-1 gap-2"> <HydrationBoundary state={dehydrate(queryClient)}> <HouseholdsList /> </HydrationBoundary> </div> 阅读更多 →reactjs - nextjs <Image/> 组件上的 UNABLE_TO_GET_ISSUE_CERT_LOCALLY 错误
我正在使用 nextjs
typescript - 如何解决在使用 Docker 构建 Nextjs 时出现的 Can’t Resolve .... 错误？
#Dockerfile FROM node:20-alpine AS installer WORKDIR /next_app COPY src/package.json ./ RUN apk add --update python3 make g++ gcc fftw-dev libc6-compat RUN apk add --update --repository http://dl-3.alpinelinux.org/alpine/edge/testing vips-dev RUN rm -rf /var/cache/apk/* RUN npm install --production FROM installer AS builder WORKDIR /next_app COPY src/. . RUN npm run build FROM node:20-alpine WORKDIR /next_app COPY --from=builder /next_app/.next ./.next COPY --from=builder /
阅读更多 →typescript - NextJS 图像优化在 Vercel 生产环境中不起作用
目前我正在开发一个 NextJS 应用程序。我的应用程序将通过多个域名在 Vercel 上部署。该应用程序应动态渲染图像。在 Vercel 的预览环境中，所有图像都能正确渲染，但当我将应用程序部署到生产环境时，优化图像的响应为：Bad request INVALID_IMAGE_OPTIMIZE_REQUEST
如果我请求原始（未优化）图像，一切都按预期工作。我使用的是最新版本的 NextJS（14.0.4）
我尝试过为 NextJS 使用多种不同的配置（config.nextjs.mjs）。我还尝试手动请求不同的图片（原始和优化过的）。
阅读更多 →typescript - NextJS 类型路由和泛型
我们在 NextJS 中开启了实验性的 typedRoutes：
const nextConfig = { ... experimental: { typedRoutes: true, }, };这一切运作良好。我甚至成功让组件接受类型检查的 URL：
function InfoSection<T extends string>({ editHref }: { editHref: Route<T>; }) { ... return ( ... <Link href={editHref}>Edit</Link> ... ); }然而，我显然对 TypeScript 泛型理解得还不够透彻。为什么 this 不起作用？
function test<T extends strin 阅读更多 →typescript - 在 nestjs 后端和 nextjs 14 之间设置 cookies
我在将来自 NestJS 后端的 cookie 设置到我的 NextJS 应用中时遇到了问题。
我的 NestJS 应用运行在 3001 端口，这是我的启动文件
async function bootstrap() { const app = await NestFactory.create(AppModule); app.enableCors({ origin: 'http://localhost:3000', credentials: true, }); app.use(cookieParser()); await app.listen(3001); } bootstrap();为了测试它，我创建了一个 GET 端点
@Get() async getAll(@Req() request: Request, @Res() response: Response) { console.log(request.cookies); 阅读更多 →typescript - nextjs 14 应用路由器 TRPC websocket 订阅服务器设置
我正在使用 nextJS 14 应用路由器结合 TRPC。我一直在尝试实现 TRPC 的 WebSocket 订阅功能，但我发现很少有关于如何实现的最新文档。
我确实偶然发现了一个资源，[这个仓库](https://github.com/trpc/examples-next-prisma-websockets-starter) 是由 trpc 的开发者维护的，不过它没有使用 app router。在里面，他们有两个值得注意的单独文件 prodServer.ts 和 wssDevServer.ts 位于 src/server/。理想情况下，应该只有一个文件用于为生产和开发环境设置 ws 服务器，那么为什么这里他们会为每个环境使用不同的文件呢？
如果我在自己的环境中实现开发服务器，我的套接字在连接后会立即关闭，因为在 applyWSSHandler 中调用的 createContext 函数发生错误。当调用任何仅在服务器端运行的函数
阅读更多 →为什么 TypeScript 会在 NextJs 14 中将 SVG 导入的类型推断为“any”
我正在开发一个使用 app 路由、TypeScript 和 ESLint 的 NextJs 14 项目。在我的 app 文件夹中，我有一个包含一些 jpg 和 SVG 图片的 assets 文件夹。我将这些图片导入到同一文件夹内的 index.ts 文件中，并导出一个名为 images 的对象变量，该变量包含所有图片，并具有如下签名：
Export const images: {[key : string] : StaticImageData} = {image1, image2, image3}但我注意到的是，jpg 导入被正确推断为 StaticImageData，而 SVG 导入则被推断为 any。当我运行 eslint 时，它抱怨我不安全地赋值了 any 类型。我如何在不禁用任何 TS 配置规则的情况下修复这一切
阅读更多 →