0

Still in my journey of deploying my ssr app on firebase. Almost there.

I only have an issue with my images. I am getting a 400 error message on the console. Pictures are from an external url. The data fetched is correct but it does display somehow. You will see below my server.js file and next.config.js.

Can someone tell me what is missing, please?

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' },
    image :{ domain :['assets.coingecko.com'],}
});

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

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]',
            },
          },
        ],
      },
    ],
  },

  //...
}
Martin54
  • 1,349
  • 2
  • 13
  • 34
Leo
  • 481
  • 2
  • 9
  • 20
  • Does this answer your question: [Fetching an image from Firebase storage using next/image results in a 400 status code](https://stackoverflow.com/questions/65601999/fetching-an-image-from-firebase-storage-using-next-image-results-in-a-400-status)? The next/image configuration needs to be added inside the `conf` object in `server.js`. – juliomalves Nov 14 '21 at 15:18
  • Hi @juliomalves thanks for your contribution. i have seen this one but i am not sure how i can apply this to my code. how do i add my config to distDir? – Leo Nov 14 '21 at 16:11
  • You don't add it to `distDir`, you add it to the `conf` object, i.e. `conf: { distDir: '.next', images: { domains: ['assets.coingecko.com'] } }`. – juliomalves Nov 14 '21 at 16:17
  • @juliomalves when i try it i say join not defined. i have added it like this const nextjsDistDir = join("src", require("./next.config.js").distDir); const isDev = process.env.NODE_ENV !== 'production'; const server = next({ dev: isDev, //location of .next generated after running -> yarn build conf: { distDir: nextjsDistDir }, image :{ domain :['assets.coingecko.com'],} }); – Leo Nov 14 '21 at 17:49
  • Where does `join` come from? Did you try the approach of the top answer on the question I linked? – juliomalves Nov 14 '21 at 17:55
  • @juliomalves thanks. i did tried the one below. i have did as per the first question, i am receiving error 500 could not handle request – Leo Nov 14 '21 at 18:49
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/239228/discussion-between-leo-and-juliomalves). – Leo Nov 15 '21 at 10:22

1 Answers1

0

First, I wanted to thank you for your help @juliomalves.

I found the answer to my issue. I have answered the questions in detail here if anyone finds himself in the same situation.

Ion Utale
  • 551
  • 1
  • 9
  • 22
Leo
  • 481
  • 2
  • 9
  • 20