小编Rob*_*oli的帖子

如何在 next.js 中使用 firebase 的 firestore/admin sdk

我正在使用 firebase 和 next.js 构建应用程序

我对这个设置相当陌生,对 SSR 完全陌生,firebase 文档让我感到困惑。

目前,我正在使用 firebase 函数来运行 next.js,这就像一个魅力。但是现在,我想使用firestore。根据文档,我看到了两种在我的项目中使用它的方法(如果我做对了)。第一个是“网络”解决方案,它对我没有好处,因为我相信它不是 SSR,而我的应用程序的全部意义就在于此。

另一个是“node.js”解决方案,它在 firebase 函数上运行,这对我来说更有意义。我无法弄清楚的部分是将它与 Next.js 一起使用

在我当前的设置中,我正在将我的 next.js 应用程序构建函数文件夹中,在函数文件夹中,我可以引用我使用“node.js”解决方案创建的 databaseref 对象,但是如何构建我的下一个应用程序之前引用它? 那么当我不在函数文件夹中时?

设置:

- src
  - utils
  - pages
    - index.js
    - signin.js
    - // etc.
- functions 
  - next // this is the output folder of my 'src' build
  - index.js 
  - // etc.
Run Code Online (Sandbox Code Playgroud)

在里面functions/index.js我可以做:

- src
  - utils
  - pages
    - index.js
    - signin.js
    - // etc. …
Run Code Online (Sandbox Code Playgroud)

firebase reactjs server-side-rendering firebase-admin next.js

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

getStaticPaths 抛出“TypeError:segment.replace 不是函数”

我是 Next.js 的新手getStaticPaths,现在收到此错误,不知道如何处理它。

这是我的代码(我正在使用queryfrom serverless-mysql):

export async function getStaticPaths() {
    const userIds = await query(/* sql */`
          SELECT userId FROM user_table_v3test
      `);
    const mappedIds = JSON.parse(JSON.stringify(userIds.map(id => ({ params: { slug: [id.userId]}}))));

    return {
        paths: [
            { params: { slug: [] } },
            ...mappedIds
        ],
        fallback: false
    };
}
Run Code Online (Sandbox Code Playgroud)

在此错误中返回(在每个页面上):

Server Error
TypeError: segment.replace is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window. …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs next.js

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

对象本身内的引用对象变量名称

是否可以在对象本身内引用对象变量声明的名称?就像是:

const foo = {
  bar: `${MAGICTHIS}-bar`,
}

console.log(foo.bar); //foo-bar
Run Code Online (Sandbox Code Playgroud)

编辑:

我正在编写一个动态函数,用于将我的所有CSS类名重写为对象中的BEM。我这样做是为了能够在整个应用程序中集中管理它们。没有该功能,它是这样的:

export const button = {
  btn: 'button',
  btnSm: 'button--small',
  btn2: 'button--secondary',

export const alert = { 
  alert: 'alert',
  alertDanger: 'alert--danger',
//etc
}
Run Code Online (Sandbox Code Playgroud)

因为我想隔离使用情况,所以将它们分隔在不同的对象中。我想优化它,因为我会做很多事情。这就是为什么我要编写一个“ bemmify”功能。所以我可以这样做:

export const button = {
  btn: bemmify(),
  btnSm: bemmify('small'),
  btn2: bemmify('secondary'),

export const alert = { 
  alert: bemmify(),
  alertDanger: bemmify('danger'),
//etc
}
Run Code Online (Sandbox Code Playgroud)

并具有与上述对象相同的结果。当然,我总是可以将'base'作为第一个参数(bemmify('button', 'small'))传递,但是我开始怀疑是否有可能让我的bemmify函数变得如此聪明,以至于它可以识别其所在对象的名称。

javascript ecmascript-6

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