小编jul*_*ves的帖子

我正在尝试使用传递router.push查询字符串来进行重定向，但是当我尝试在参数中传递带有特殊字符的值（如逗号）时，正在对我的 URL 进行编码。是否可以使用 ',' 传递到 URL 中router.push？

我尝试了很多事情，但我不知道如何让它发挥作用。

router.push({
  pathname: router.pathname,
  query: { ...router.query, pets: 'cats,dogs'},
})

生成的 URL 将是myurl?pets=cats%2Cdogs，我希望它是myurl?pets=cats,dogs。

在 Tailwind CSS 中使用基于类的深色模式和 Next.js v12 时，如何防止页面闪烁，而不使用任何 3rd 方 pkg（例如 next-themes）？

我看过：

• 此问答如何修复 NextJS 中的暗模式背景颜色闪烁？虽然它在 Next.js <v12 中是一个有效/工作的解决方案，但在 v12 中它不再工作并在 dev 中抛出警告，这令人惊讶地变成了 prod env 中的构建阻塞错误 Do not add <script> tags using next/head (see inline <script>). Use next/script instead. See more info here: https://nextjs.org/docs/messages/no-script-tags-in-head-component
• 本文https://www.vidyasource.com/blog/dark-mode-nextjs-tailwindcss-react-hooks但是，包含该脚本<Script strategy="beforeInteractive" src="/scripts/darkMode.js"/>仍然会导致页面闪烁，因为它添加defer到了head
• 关于所需内容的官方 Tailwind CSS 暗模式文档https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually

// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.theme === …

我想POST使用 next.js 在我的 api 文件夹中设置一个路由，并且我正在将数据发送到该路由，但我无法解析数据以将其实际保存在数据库中。POST在 next.js 中处理路由的最佳方法是什么。特别是解析JSON格式的数据？

我通过查询参数将一些数据从一个页面传递到另一个页面，但我想隐藏 URL 中的查询。

这是我的代码。

import { useRouter } from "next/router";

const handleFormSubmit = async (values) => {
    const res = await AuthService.login(values.email, values.password);

    if (res.status === 200) {
   
       if (res.data.is_phone_number_exists === 1 && res.data.is_phone_number_verified === 0) {
        router.push({
          pathname: '/otp-verification',
          query: { email: values.email, password: values.password, phone_number: res.data.phone_number} //I want hide this query part from the url
        }) 
      }
    }
  }

如何在使用时隐藏 URL 中的查询参数router.push()？或者还有其他方法可以做同样的事情吗？

当使用文件结构 app -> explore -> page.tsx 并使用以下代码获取搜索参数时：

export default function ExplorePage({ searchParams }: { searchParams: { search: string | undefined } }) {
  const { search } = searchParams

我无法运行 npm run build。它给出了这个错误：

Type error: Page "app/explore/page.tsx" does not match the required types of a Next.js Page.
  Invalid configuration:
    The exported page component isn't correctly typed.
        Expected "{ searchParams: { search: any; }; }", got "PageProps".
          Invalid configuration:
            Expected "{ search: any; }", got "Record<string, string | string[]> | undefined". …

我在 Next.js 中收到此错误：

错误：提供的“href”（/subject/[subject]）值缺少要正确插入的查询值（subject）。了解更多：https://err.sh/vercel/next.js/href-interpolation-failed`。

我有一个动态页面设置为/subject/[subject].tsx. 现在在我的导航中我有：

<Link href={'/subject/${subject}'} passHref><a>{subject}</a></Link>

当我使用不同的路径访问页面时，它工作正常，但是当我按下页面上的按钮时，它会抛出错误，我想这是因为组件重新渲染。如果您转到错误中的页面，它会显示：Note: this error will only show when the next/link component is clicked not when only rendered.

我试图寻找解决方案，并尝试这样做：

<Link href={{pathname: '/subject/[subject]', query: {subject: subject}}}></Link>

但一切都没有改变。我阅读了文档，似乎该asprop 只是一个不再使用的可选装饰器，所以我不知道这对我有什么帮助。

我正在尝试使用 ReactJS 和 TailwindCSS 创建一个设计系统。

我创建了一个Button具有基本样式的默认组件，如下所示：

import React from "react";
import classNames from "classnames";

const Button = React.forwardRef(
  ({ children, className = "", onClick }, ref) => {
    const buttonClasses = classNames(
      className,
      "w-24 py-3 bg-red-500 text-white font-bold rounded-full"
    );

    const commonProps = {
      className: buttonClasses,
      onClick,
      ref
    };

    return React.createElement(
      "button",
      { ...commonProps, type: "button" },
      children
    );
  }
);

export default Button;

然后我在我的页面中使用Button：

import Button from "../src/components/Button";

export default function IndexPage() {
  return ( …

我正在使用 NextJs + TypeScript 制作一个小型克隆项目，但我在输入getServerSideProps. 正如您所看到的，在 中getServerSideProps，我正在使用 with 获取数据context.query。但有些错误消息尚未修复，我不明白为什么会出现该错误。

错误信息是这样的。

Type 'string[]' cannot be used as an index type.ts(2538)
Type 'undefined' cannot be used as an index type.ts(2538)
const genre: string | string[] | undefined

我该如何解决这种类型的问题？

Type 'string[]' cannot be used as an index type.ts(2538)
Type 'undefined' cannot be used as an index type.ts(2538)
const genre: string | string[] | undefined

Next.JS 使用 babel 来配置 Why Did You Render。

module.exports = function (api) {
    const isServer = api.caller((caller) => caller?.isServer)
    const isCallerDevelopment = api.caller((caller) => caller?.isDev)

    const presets = [
        [
            'next/babel',
            {
                'preset-react': {
                    importSource:
                        !isServer && isCallerDevelopment
                            ? '@welldone-software/why-did-you-render'
                            : 'react'
                }
            }
        ]
    ]

    return {presets}
}

如何在不禁用 SWC 的情况下更新到 Next.JS 12？

我在哨兵上收到此错误。我不知道下一个/路由器如何或为什么将用户重定向到同一页面，它发生在某些浏览器上，并且在某些浏览器上工作得很好。

标签

{
  "routing.instrumentation": "next-router"
}

操作-页面加载