我在 NextJs 项目上使用 NextAuth,但收到错误"Type error: Property 'session' does not exist on type '{}'."。session我按照此处的建议将该属性添加到我的 _app.tsx 中:
https://next-auth.js.org/getting-started/example
我还将该属性添加到了我的自定义MyApp类型接口中,但仍然收到错误。按照我的代码:
import { NextComponentType } from "next";
import { Session } from "next-auth";
export interface CustomAppProps extends AppProps {
Component: NextComponentType & { auth?: boolean; session?: Session };
}
function MyApp({ Component, pageProps: { session, ...pageProps } }: CustomAppProps) {
//...
});
Run Code Online (Sandbox Code Playgroud)
我该如何修复它?谢谢!
编辑#1(添加MyApp我当前的代码):
function MyApp({ Component, pageProps: { session, ...pageProps } }: CustomAppProps) {
return …Run Code Online (Sandbox Code Playgroud) 我正在使用 next.JS 和包 next-i18next 构建一个多语言网站。它进展顺利,除了一件事我不确定什么是最好的方法。我希望我的静态路由也将被翻译(不仅是页面内容),例如:
example.com/en/home -> example.com/pt-br/inicio
example.com/en/contact -> example.com/pt-br/contato
我知道我可以创建目录 (en/pt-br) 并在其中插入页面(例如:home.js、contact.js 等在“/en/”和 inicio.js、contato.js 等在“/”中pt-br/"),这样在用户访问这些页面时很容易定义语言,但我需要创建 2 个几乎所有相同内容的文件(例如:“/en/home”和“/pt-br/inicio”)。所以我想知道是否有更好的解决方案?
谢谢!
我正在使用 Next.js、NextAuth.js 和 Typescript 开发一些受保护的页面。我的以下代码_app.tsx取自 NextAuth.js 官方网站,但其中包含一个auth不存在Component的类型为 的属性var Component: NextComponentType<NextPageContext, any, {}>,因此 TS 显示了一个错误:
function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
return (
<>
<SessionProvider session={session}>
{Component.auth ? (
<Auth>
<Component {...pageProps} />
</Auth>
) : (
<Component {...pageProps} />
)}
</SessionProvider>
</>
);
}
Run Code Online (Sandbox Code Playgroud)
我不是 Typescript 专家,所以我的问题是如何auth使用 TS 添加/扩展该属性到组件?
我正在尝试使用 Next.js v14 进行页面转换,但没有成功。
没有显示错误,动画只是不起作用。我猜这是因为它layout.tsx是在服务器上呈现的。但我该如何解决呢?
我的layout.tsx代码(根级别):
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Sidebar from "@/components/Sidebar";
import Breadcrumbs from "@/components/Breadcrumbs";
import Topbar from "@/components/Topbar";
import PageTransitionEffect from "@/components/PageTransitionEffect";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en"> …Run Code Online (Sandbox Code Playgroud) 我曾经使用本地安装的 Node.js v16.x 来运行 Strapi,效果很好。
但最近由于另一个项目,我不得不将其更新到 Node.js v18.x,因此我安装了 NVM 来管理我的 PC 上的多个 Node.js 版本 - 现在我想将 Strapi 与新的 Node.js 一起使用,但我可以甚至不再启动开发模式。夏普的包装有问题。
我不确定 Sharp 包的问题是否是由于新的 Node 版本或 NVM 引起的。由于安装的 Node (v18.17.0) 在 Shap 包 npm 页面(此处)上被列为兼容,我猜问题出在 NVM 上。
nvm list
* 18.17.0 (Currently using 64-bit executable)
16.14.2
Run Code Online (Sandbox Code Playgroud)
我的依赖项:
"dependencies": {
"@strapi/plugin-i18n": "4.16.2",
"@strapi/plugin-users-permissions": "4.16.2",
"@strapi/provider-email-amazon-ses": "4.16.2",
"@strapi/provider-upload-aws-s3": "4.16.2",
"@strapi/strapi": "4.16.2",
"@strapi/utils": "4.16.2",
"pg": "8.11.3",
"reach": "1.0.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "5.2.0",
"sharp": "^0.33.1",
"slugify": "1.6.6",
"strapi-plugin-config-sync": "1.2.3",
"strapi-plugin-email-designer": "2.2.1", …Run Code Online (Sandbox Code Playgroud) 我有 2 个 Next.js 应用程序正在运行,并显示相同的消息错误:Browserslist: caniuse-lite is outdated. Please run next command 'yarn upgrade'。yarn dev当我运行or 或yarn start之类的命令时,会显示该消息yarn build。NPM 的情况也是如此。
yarn upgrade我已经多次尝试命令 ( ) 但没有成功;几天前还好,所以我不确定这是否与某些新的软件包更新有关。
还有人有同样情况吗?
我的package.json是:
{
"name": "website-2020",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js",
},
"dependencies": {
"@tanem/react-nprogress": "^3.0.24",
"@zeit/next-sass": "^1.0.1",
"express": "^4.17.1",
"isomorphic-unfetch": "^3.0.0",
"next": "^9.3.5",
"node-sass": "^4.14.0",
"prop-types": "^15.7.2", …Run Code Online (Sandbox Code Playgroud) 今天升级我的软件包后,我开始收到此错误,是否可以在不降级软件包的情况下修复?
我看到其他人也有类似的错误,但使用其他软件包 - 没有任何建议的修复解决了我的问题。
它之前可以工作,但如果可能的话,我想使软件包保持最新。
谢谢你!
构建时报错:
./src/pages/_app.tsx:46:10
Type error: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & CookieConsentProviderProps'.
44 |
45 | <SessionProvider session={session}>
> 46 | <CookieConsentProvider>
| ^
47 | <AppContextProvider>
48 | {Component.auth ? (
49 | <Auth>
> Build error occurred
Error: Call retries were exceeded
at ChildProcessWorker.initialize (C:\Projects\project1\node_modules\next\dist\compiled\jest-worker\index.js:1:11661)
at ChildProcessWorker._onExit (C:\Projects\project1\node_modules\next\dist\compiled\jest-worker\index.js:1:12599)
at ChildProcess.emit (node:events:526:28)
at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) {
type: 'WorkerError'
}
error Command failed with exit code 1. …Run Code Online (Sandbox Code Playgroud)