I am new to Next.js, I built a simple landing page and wanted to generate a static page using npm run build which I set in package.json to "build": "next build && next export".
But I get this Error:
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`.
Can someone help me, I read the documentation and I created next.config.js in the root and pasted this:
module.exports = {
images: {
loader: 'imgix',
path: '/images/',
},
}
I think that I need a path, but the thing is I am not using hosted images, I have an images folder in the the public folder.
I know this is probably a stupid question, but I'm stuck.
I hosted them on https://imgbb.com and wrote this in next.config.js
module.exports = {
images: {
domains: ['i.ibb.co'],
},
}
and it worked.
Usage:
<Image src="https://i.ibb.co/TMBV2KP/Akwagroup.jpg"
alt="ESMASA TRAVAUX"
width={1050}
height={500}
/>
Related
I am very new to the nextjs and have come across the Image component issue. I also checked around and it seems that there are similar questions but none of them has the given scenario.
I am trying to load image from the remote source via Image component. The documentation saying that you should adjust your next.config.js file to allow remote images. Since I am using next 13.0.3 version I am using images.remotePatterns property. Despite this fact I am still getting an error of hostname not being configured.
Can you please suggest what I am doing wrong and how to overcome that problem?
Br,
Aleks.
next.config.js
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'swiperjs.com',
port: '',
pathname: '/demos/images/**',
}
],
},
Usage:
<Image
src="https://swiperjs.com/demos/images/nature-1.jpg"
className={styles.swiperslideimg}
alt="test" width={400} height={400}/>
Error:
Invalid src prop (https://swiperjs.com/demos/images/nature-1.jpg) on next/image, hostname "swiperjs.com" is not configured under images in your next.config.js
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
That configuration should work. Note that you have to restart the development server by rerunning yarn run dev or npm run dev for these configuration changes to take effect.
I faced the same problem and found the solution i was using
Notus NextJS
which had a slightly older version of nextjs so i ran
npm outdated
and updated the package.json and ran
npm run install:clean
Try to leave just that:
images: {
remotePatterns: [
{
hostname: 'swiperjs.com',
}
],
},
I am create a next build with standalone output. I follow this answer- How to deploy NextJs (SSR) using "Output File Tracing" feature to Azure App Service?
After setting up I run my server like this node server.js
It works perfectly. But here image optimization not working. I found one error-
Error: 'sharp' is required to be installed in standalone mode for the image optimization to function correctly
I recheck package.json and I can see sharp is already installed. Then I add this to my .env file-
NEXT_SHARP_PATH=/tmp/node_modules/sharp
But not working. Please any help me. I need image opmization feature in standalone mood.
***Note: I use linux subsystem on windows. In linux subsystem, When I run production mode npm run start. Image optmization automatically work in this mode, I haven't to give .env also. When I start my project in standalone mood, image optimization is not working. Even when I give .env it's not working.
Here is my next.config.js-
/** #type {import('next').NextConfig} */
const withPWA = require("next-pwa")({
dest: "public",
register: true,
disable: process.env.NODE_ENV === "development"
});
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
output: "standalone",
images: {
minimumCacheTTL: 2592000,
domains: ["dzzoo94ozikw5.cloudfront.net", "lh3.googleusercontent.com", "platform-lookaside.fbsbx.com"]
},
}
module.exports = withPWA(nextConfig)
yarn add sharp
or
npm install sharp
https://nextjs.org/docs/messages/sharp-missing-in-production
I got this error when deploying Next.js to Netlify.
Error: Image Optimization using Next.js default loader is not compatible with `next export`.
Possible solutions:
6:47:15 AM: - Use `next start`, which starts the Image Optimization API.
6:47:15 AM: - Use Vercel to deploy, which supports Image Optimization.
6:47:15 AM: - Configure a third-party loader in `next.config.js`.
6:47:15 AM: - Read more: https://err.sh/next.js/export-image-api.
6:47:15 AM: at exportApp (/opt/build/repo/node_modules/next/dist/export/index.js:14:712)
The problem does not occur when deploying to Vercel.
use akamai
setting images.loader to 'imgix' caused dev and build errors.
i used this instead:
// next.config.js
module.exports = {
images: {
loader: 'akamai',
path: '',
},
}
it just works for all i care about.
possible values for images.loader are: [ default, imgix, cloudinary, akamai, custom ]
reference: https://nextjs.org/docs/api-reference/next/image#built-in-loaders
From Next.js 12.3, you can completely disable next/image Image Optimization using the unoptimized configuration in next.config.js. This avoids having to use a third-party provider to optimize the image when using next/export.
From the next/image documentation:
unoptimized - When true, the source image will be served as-is
instead of changing quality, size, or format. Defaults to false.
module.exports = {
images: {
unoptimized: true
}
}
Before Next.js 12.3 and from 12.2, the unoptimized configuration was still experimental and could be enabled under the experimental flag.
module.exports = {
experimental: {
images: {
unoptimized: true
}
}
}
Seems you use next/images.
But next/images don't work with static pages (generated with next export)
For static pages use this image-optimizer : next-optimized-images instead
I faced the same problem when using next export command. I still receive this error:
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.
So, to make my custom loader working correctly, I needed
to set a path to an empty string:
module.exports = {
// https://github.com/vercel/next.js/issues/21079
// Remove this workaround whenever the issue is fixed
images: {
loader: 'imgix',
path: '',
},
}
BUT, when I open the resultant index.html file, none of the images or JS loaded.
So, for those who facing this also, please try to set the path to a / as such:
module.exports = {
// https://github.com/vercel/next.js/issues/21079
// Remove this workaround whenever the issue is fixed
images: {
loader: 'imgix',
path: '/',
},
}
This error is regarding Image/next, I was facing same error while "next build", than i use <img/> instead of <Image/> in the project and re-build it by npm run build and it resolves the error.
I'm unsuccessfully attempting to create a simple NextJS site that has a /app prefix on all the links. So that on the home page (which has a link to /about), the About link should end up as /app/about.
(updated based on comments below) My next.config.js file looks like this:
module.exports = {
assetPrefix: "/app",
publicRuntimeConfig: {
basePath: "/app",
},
basePath: "/app",
};
And my package.json's scripts section has:
"build": "next build && next export",
However, when I copy the contents of the generated out folder into my web server, the index page's "About" link always points to /about without the desired prefix. What could be causing that? It appears as though the assetPrefix value is working:
So it's just the root basePath field that isn't working.
This issue has been reported as fixed recently. https://github.com/vercel/next.js/pull/9872
Try to use the most recent canary release. At this moment it's 9.5.2-canary.18
I am building a project that utilises ServerMiddleware to render some pages client side only (I can't find another way of getting this working well without ServerMiddleware. Problems on refreshing pages and so on...)
The problem: Unfortunately every time I try and deploy to my Firebase Function through 'firebase deploy' I get an error:
Error: Cannot find module '~/serverMiddleware/selectiveSSR.js'
The function builds OK if I exclude the following line. Nuxt/ Vue is not including ~/serverMiddleware/ as part of its build as far as I can see.
Here is the code in nuxt.config.js to reference my serverMiddleware:
serverMiddleware: ['~/serverMiddleware/selectiveSSR.js']
Adding either the directory or path (as above) to the file itself within Build in nuxt.config.js does not help either. Maybe I am doing it wrong?
Everything works perfectly when testing (Not building) locally.
Any ideas on how I can resolve this please?
Thanks!
Ok so for anyone else who hits this, here is how I got around it.
Firstly, I don't know if this is the fault of Firebase Hosting or Nuxt (I would guess Nuxt but I stand to be corrected), but here is what to do....
1) Remove any reference to ServerMiddleware from nuxt.config.js
2) Add the following to nuxt.config.js
modules: [
'~/local-modules/your-module-name'
],
3) Create directory ~/local-modules/your-module-name in your project root
4) In the new directory, create a package.json:
{
"name": "your-module-name",
"version": "1.0.0"
}
and index.js - key thing, this.addServerMiddleware allows you to call middleware server-side
module.exports = function(moduleOptions) {
this.addServerMiddleware('~/serverMiddleware/')
}
5) Create directory ~/serverMiddleware
6) Add your middleware function to index.js in the new directory:
export default function(req, res, next) {
// YOUR CODE
next() // Always end with next()!
}
7) Update package.json with your new local module under "dependencies":
"your-module-name": "file:./local-modules/your-module-name"
Don't forget you need to do this within the functions directory too or Firebase will complain it can't find your new module