小编Bin*_*men的帖子

我想重构我的 Next.js webapp，让不同的页面处理不同的屏幕。目前，我让这个组件拥有多个状态，以了解我在哪个屏幕中。在 jsx 部分，我正在使用{value && ... }来呈现正确的组件。

但是我觉得这不是一个好的设计，并且随着添加越来越多的屏幕将无法维护。

我也想避免使用 Redux，因为它对我的项目来说太过分了。

我正在考虑将数据保存在 cookie 中，以便在渲染新页面时可以在每个组件中使用 getInitialProps 检索它们，但是有没有更优雅的方法？

我已经阅读了关于调整的内容，_app.js但我不确定这样做的后果，以及它如何帮助我..

有什么建议吗？

在我使用 firebase 模拟器的本地环境中，我有以下规则引发FirebaseError: Property managers is undefined on object. for 'list'：

rules_version = '2';
service cloud.firestore {
    match /databases/{database}/documents {
        match /businesses/{business} {
            allow read: if request.auth != null && request.auth.uid in resource.data.managers;
        }
    }
}

如果我在规则游乐场上测试相同的规则，它会正常工作（Simulated read allowed）..

为了证明我已经定义了 manager 属性并且可用，如果我将规则更改为if true，我可以使用以下本地数据在列表上循环：

// code
...
.then((snap) => snap.forEach((doc) => console.log(doc.id, " => ", doc.data())))

// output
VzaU8rX8HOgejk0fyOFK  =>  {..., managers: Array(1)}

我究竟做错了什么？

谢谢 ！

更新

这是我想要应用规则的代码：

    useEffect(() => {
        db.collection("businesses")
            .where("slug", "==", params.slug) …

我在 NextJS 应用程序中使用 useSound，并且我想播放位于 /public/static 中的 mp3：

import notification from "../../public/static/notification.mp3"

它在运行时工作yarn dev（正在播放声音，没有错误），但在使用以下命令构建时会引发错误yarn prod：

Type error: Cannot find module '../../public/static/notification.mp3' or its corresponding type declarations.

有人可以帮我吗？我一直在浏览 internet/SO/github，并尝试了几件事，包括修改next.config.js：

Type error: Cannot find module '../../public/static/notification.mp3' or its corresponding type declarations.

没有成功..

我正在使用Tabs,Tab和TabPanel来自 Material-UI ，如https://material-ui.com/components/tabs/ 中所述。我将它与 Next.js 结合使用。

这是我到目前为止的代码（我删除了 GraphQL/Apollo 调用、Next 路由和内容以简化一点）：https ://codesandbox.io/s/material-demo-6mq4g?file=/demo .js

在 Codesandbox 上，它可以正确呈现。但是，在本地，在 Chrome 中，我有以下内容：

这是检查员：

如果我点击 Alice，然后再次点击 Bob，现在一切看起来都很干净：

并且检查器看起来正确（填充相应地应用于<Box p={3}>）：

我不明白为什么在第一次加载时不应用该样式。

有什么建议吗？

谢谢！

本杰明