reactjs - 使用 Firebase 托管 React 下一个应用程序如何工作？

Question

我正在尝试使用 firebase 部署我的 react next 应用程序，但我遇到了许多问题。当我在运行 firebase init 和 npm run build 之后部署运行 firebase deploy。我也尝试将 && 导出添加到 json 脚本，但没有任何效果。它不会生成包含我的内容的静态 html 页面。

我收到以下错误消息。当我运行 npm run 时，在 localhost 上启动我的页面渲染没有问题，但它不能解决部署问题。我仍然没有得到我的静态 html。

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

info  - using build directory: C:\Users\lonar\Desktop\Project\crypto-react\.next
info  - Copying "static build" directory
info  - No "exportPathMap" found in "C:\Users\lonar\Desktop\Project\crypto-react\next.config.js". Generating map from "./pages"
Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
  Possible solutions:
    - Use `next start` to run a server, which includes the Image Optimization API.
    - Use any provider which supports Image Optimization (like Vercel).
    - Configure a third-party loader in `next.config.js`.
    - Use the `loader` prop for `next/image`.
  Read more: https://nextjs.org/docs/messages/export-image-api
    at C:\Users\lonar\Desktop\Project\crypto-react\node_modules\next\dist\export\index.js:256:23
    at async Span.traceAsyncFn (C:\Users\lonar\Desktop\Project\crypto-react\node_modules\next\dist\trace\trace.js:74:20)

我已经把我当前的 next.config.js 放在下面。有人可以帮我设置它以使其运行吗？

const webpack = require('webpack');
const path = require('path');
//const withPlugins = require('next-compose-plugins');
//const optimizedImages = require('next-optimized-images');



module.exports = {
  images: {
    domains: ['assets.coingecko.com'],
    //loader: 'imgix',
    //path: 'https://assets.coingecko.com/',
  },
  reactStrictMode: true,
  entry: './src/index.js',
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
  module: {
    rules: [
      //...
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[hash]-[name].[ext]',
            },
          },
        ],
      },
    ],
  },

  //...
}

标签： reactjsnext.jsfirebase-hosting