next.js项目的react quill库存在问题

我遇到了一个奇怪的问题。我使用NextJS的服务器端渲染功能，并使用ReactQuill作为我的富文本编辑器。为了绕过ReactQuill与DOM的关联，我将动态导入它。然而，这带来了另一个问题，即当我试图访问我通过锚链接导入ReactQuill的组件时，该组件不起作用，但我可以通过手动点击路径来访问它。这是我的目录概览

components/
  crud/
    BlogCreate.js
pages/
  admin/
    crud/
      blog.js
    index.js
  blogs/
    index.js

在我的

页面/admin/index.js

  ...
    <li className="list-group-item">
      <Link href="/admin/crud/blog">
        <a>Create Blog</a>
      </Link>
    </li>
  ...

import BlogCreate from "../../../components/crud/BlogCreate";
...
<div className="col-md-12">
  <BlogCreate />
</div>

在my

components/crud/BlogCreate.js

import dynamic from "next/dynamic";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import "../../node_modules/react-quill/dist/quill.snow.css";
...
        <div className="form-group">
          <ReactQuill
            value={body}
            placeholder="Write something amazing..."
            onChange={handleBody}
          />
        </div>

const withCSS = require("@zeit/next-css");
module.exports = withCSS({
  publicRuntimeConfig: {
...
  }
});

问题
当我点击

Create Blog

时，它应该是重定向我

http://localhost:3000/admin/crud/blog

但它只是冻结了

但是如果我手动点击

http://localhost:3000/admin/crud/blog

然后它进入desire页面并完美工作

---

我一手动加载该页面，就可以创建博客了。现在我真的不明白问题出在哪里了？因为它没有显示错误，这就是为什么我没有术语来描述我的问题，这就是为什么我给出了所有令人讨厌的代码和目录，我怀疑这是错误的原因

在没有看到整个项目的情况下，很难给您提供任何解决方案（正如您提到的，它显示没有错误）。 您可以删除

@zeit/next css

插件，因为next.js 9.3是。您也可以将其用于css

创建一个

pages/_app.js

文件（如果尚未存在）。然后，导入

quill.snow.css

文件：

导入“../../node_modules/react quill/dist/quill.snow.css”；
//在新的`pages/_app.js`文件中需要此默认导出。
导出默认函数MyApp（{Component，pageProps}）{
返回；
}

---

如果出现任何错误，那么您可以创建一个目录/文件来复制粘贴该文件中的

quill.snow.css

代码

pages/
  _app.js
styles/
  quill_style.css

然后在

\u app.js

中导入文件，如下所示：

导入“./style/style_quill.css”；
//在新的`pages/_app.js`文件中需要此默认导出。
导出默认函数MyApp（{Component，pageProps}）{
返回；
}

最终，您也可以在这里导入自定义的gobal css

---

如果问题仍然存在，请提供git存储库。快乐编码✌️

首先：删除您的@zeit/next css设置，从next.js版本10开始不再需要

第二：将nex.js更新到版本10，然后可以在模块上使用常规导入

import "../../node_modules/react-quill/dist/quill.snow.css";

---

顺便说一下，我对你的Nextjs课程也有同样的问题

抱歉，埃蒙霍桑的回复太晚了。是的，你的第二种方法对我有效。一个问题是

\u app.js

如何为项目的所有组件提供这些样式？它是否会使完全不需要这些样式的其他组件的渲染变慢？如何在nextjs中注册react quill模块？