小编wic*_*k3d的帖子

我正在尝试使用 Next.jsnext/future/image实验组件。

我将 Next.js 版本升级package.json到"next": "^12.2.0".

这是我的next.config.js文件：

/** @type {import('next').NextConfig} */
const nextConfig = {
    strictMode: true,
    experimental: {
        images: {
            allowFutureImage: true,
        },
    },
    images: {
        domains: ['firebasestorage.googleapis.com',],
    },
};

module.exports = nextConfig;

它不允许我使用此功能。这是浏览器控制台中的错误消息：

Error: The "next/future/image" component is experimental and may be subject to breaking changes. To enable this experiment, please include `experimental: { images: { allowFutureImage: true } }` in your next.config.js file.

我正在尝试在 Vercel 上部署一个使用 firebase-admin 的 NEXT JS 应用程序。

import * as firebaseAdmin from \'firebase-admin\';\nimport firebase from \'firebase/app\';\n\nif (!firebaseAdmin.apps.length) {\n  firebaseAdmin.initializeApp({\n    credential: firebaseAdmin.credential.cert({\n      privateKey: process.env.NEXT_PUBLIC_FIREBASE_PRIVATE_KEY,\n\n      clientEmail: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_EMAIL,\n\n      projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,\n    }),\n\n    databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,\n  });\n}\n

当我将其部署到 vercel 时，环境变量如下：

NEXT_PUBLIC_FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\\n....\\n-----END PRIVATE KEY-----\\n"\n

我收到此错误消息。

NEXT_PUBLIC_FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\\n....\\n-----END PRIVATE KEY-----\\n"\n

但是npm run build在本地运行构建没有错误。

.env.local\ninfo  - Linting and checking validity of types  \ninfo  - Creating an optimized production build  \ninfo  - Compiled successfully\ninfo  - Collecting …

您好，我正在尝试在下一个 js 项目中使用顺风背景颜色。背景颜色未应用于 nextJS 的组件。

这是tailwind.config.css。

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        'background-dark': '#121212',
        menubar: '#181818',
        'secondary-text': '#B3B3B3',
        'primary-text': '#FFFFFF',
        'gray-dark': '#273444',
        gray: '#8492a6',
        'gray-light': '#d3dce6',
      },
    },
  },
  plugins: [],
};

我从Tailwind 中使用自定义颜色调色板获得了此代码 sinppet 。

MainLayout 属性向所有页面添加默认的自定义背景颜色。

type MainLayoutProps = {
  children: React.ReactNode;
};

export const MainLayout = ({ children }: MainLayoutProps) => {
  return <div className="bg-background-dark">{children}</div>;
};

我已经将其添加到_app.tsx类似的内容中。

function MyApp({ Component, pageProps }: AppProps) {
  return ( …

伙计们，我是顺风的新手，并试图在表行之间添加空间。

      <table className="table-auto w-full shadow-md mt-5 rounded">
        <thead className="bg-base-200 text-left text-gray-700  tracking-wider">
          <tr>
            <th className="p-4 ">Chapter Number</th>
            <th className="p-4 ">Chapter Name</th>
            <th className="p-4 ">Added at</th>
            <th className="p-4 ">Status</th>
          </tr>
        </thead>
        <tbody>
          {chapters.map((chapter) => (
              <tr className="bg-card mt-6 rounded" key={chapter.chapterNumber}>
                <td className="p-4">{chapter.chapterNumber}</td>
                <td className="p-4">{chapter.chapterName}</td>
                <td className="p-4">{chapter.addedAt}</td>
                <td className="p-4">{!chapter.published && 'Not published'}</td>
              </tr>
          ))}
        </tbody>
      </table>

这不会增加表行之间的空间。mt-6所以，我在每一行都尝试过。它没有任何作用。

我看到过类似的问题并使用了 此处的答案，并添加了border-spacing和border-seperate。

所以，现在我的表行有这些类。

      <table className="table-auto w-full shadow-md mt-5  border-spacing-2 border-separate rounded">

但这会导致所有元素周围增加空间。

我不明白为什么表行会这样表现并且不采用marginwith mt-6。 …