Next JS Firebase 在此处托管 html 和数据，但没有样式表，一些脚本有 404 错误

Question

我正在努力在 firebase 上部署我的第一个下一个应用程序......真让人头疼？！我以某种方式设法部署了它，但现在我面临着一堆问题。我用 bootstrap 和 sass 设置了我的组件的样式，我正在从 url/public api.

中获取我的图像和数据

页面加载了所有数据，但没有样式，也没有显示图片。当我检查控制台时，有一些与获得 404 响应的获取请求相关的错误。检查网络选项卡显示我的 css 文件和一些脚本没有加载。我不知道要共享代码的哪一部分，因为我只是不知道哪里出了问题。我添加了一些相关问题的屏幕截图，希望这对您有所帮助。有人可以告诉我我应该做什么吗？感谢 Leo [![控制台网络选项卡][css]

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

package.json

{
  "name": "crypto-react",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "export": "^0.1.337",
    "next": "^12.0.4-canary.4",
    "next-compose-plugins": "^2.2.1",
    "next-optimized-images": "^2.6.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-icons": "^4.3.1",
    "sharp": "^0.29.2"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "12.0.3"
  }
}

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 = {
  distDir: 'build',
  images: {
    domains: ['assets.coingecko.com'],
    loader: 'custom',
    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]',
            },
          },
        ],
      },
    ],
  },

  //...
}

Answer 1

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


module.exports = withImages(  {
  
  images: {
    domains: ['assets.coingecko.com', 'mywebsite.whatever.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]',
            },
          },
        ],
      },
    ],
  },

  //...
}
)

在 server.js 上取消注释图像如下

const { https } = require('firebase-functions');
const { default: next } = require('next');

const isDev = process.env.NODE_ENV !== 'production';

const server = next({
    dev: isDev,
    //location of .next generated after running -> yarn build
    conf: { distDir: '.next' },
    //images :{ domain :['assets.coingecko.com'],}
});

const nextjsHandle = server.getRequestHandler();
exports.nextServer = https.onRequest((req, res) => {
    return server.prepare()
        .then(() => {
            return nextjsHandle(req, res)
        });
});

然后将自定义加载器添加到我的图像中，如下所示在应该渲染它们的组件上


const myLoader = ({ src, width, quality }) => {
  return `${src}?w=${width}&q=${quality || 75}`
}

<Image
              loader={myLoader}
              className="mr-3"
              src={image}
              alt="crypto"
              height={30}
              width={30}
            />

而且它 :)。

谢谢大家的帮助。我希望将来会有人这样做。 :)

Next JS Firebase 在此处托管 html 和数据，但没有样式表，一些脚本有 404 错误

Next JS Firebase hosting html and data here but no stylesheet and some scripts have 404 ERROR

firebase-hosting

next.js