小编Ale*_*iva的帖子

(NextAuth) 类型错误:类型“{}”上不存在属性“会话”

我在 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)

typescript reactjs next.js next-auth

25
推荐指数
2
解决办法
2万
查看次数

如何使用 NextJS 和 next-i18next 翻译路由?

我正在使用 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”)。所以我想知道是否有更好的解决方案?

谢谢!

translation i18next reactjs next.js

19
推荐指数
1
解决办法
2183
查看次数

如何使用 Typescript 将新属性添加到 Next.js 中 _app.tsx 中的组件?

我正在使用 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 添加/扩展该属性到组件?

typescript reactjs next.js next-auth

13
推荐指数
1
解决办法
6412
查看次数

如何使用 Framer Motion 和 Next.js 14 进行页面转换?

我正在尝试使用 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)

reactjs next.js framer-motion react-server-components

5
推荐指数
1
解决办法
2197
查看次数

无法使用 win32-x64 运行时 (Strapi) 加载“sharp”模块

我曾经使用本地安装的 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)

node.js nvm strapi sharp

5
推荐指数
1
解决办法
2514
查看次数

Browserslist:caniuse-lite 已过时。请运行下一个命令“yarn update”

我有 2 个 Next.js 应用程序正在运行,并显示相同的消息错误:Browserslist: caniuse-lite is outdated. Please run next command 'yarn upgrade'yarn dev当我运行or 或yarn start之类的命令时,会显示该消息yarn build。NPM 的情况也是如此。

  • yarn upgrade我已经多次尝试命令 ( ) 但没有成功;
  • 我已经尝试删除锁定文件和node_modules,但消息仍然存在;
  • 我尝试过 Visual Studio 和终端 (Ubuntu);

几天前还好,所以我不确定这是否与某些新的软件包更新有关。

还有人有同样情况吗?

我的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)

npm reactjs yarnpkg next.js caniuse

4
推荐指数
1
解决办法
9256
查看次数

出现错误:键入 '{children:Element; }' 与类型“IntrinsicAttributes &amp; CookieConsentProviderProps”没有共同属性

今天升级我的软件包后,我开始收到此错误,是否可以在不降级软件包的情况下修复?

我看到其他人也有类似的错误,但使用其他软件包 - 没有任何建议的修复解决了我的问题。

它之前可以工作,但如果可能的话,我想使软件包保持最新。

谢谢你!

构建时报错:

./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)

typescript reactjs next.js

3
推荐指数
1
解决办法
3678
查看次数