I am getting the below message:
Error: Invalid src prop (https://storage.googleapis.com/agrf-upload/abcd.png) on `next/image`, hostname "storage.googleapis.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
but my next.config.js is as below:
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
domains: ['storage.googleapis.com', 'www.coinpayments.net', 'coinpayments.net'],
},
compiler: {
removeConsole: false,
},
images: {
minimumCacheTTL: 1500000,
},
swcMinify: true
}
module.exports = nextConfig
It was working fine until I restarted my laptop. I am now clueless. Please help me to sort it out.
I had another image section in the config, which was interfering the above image block (used to specify domains):
images: {
minimumCacheTTL: 1500000,
},
So now my updated next.config.js looks like:
const nextConfig = {
reactStrictMode: true,
images: {
domains: ['storage.googleapis.com', 'coinpayments.net'],
minimumCacheTTL: 1500000,
},
compiler: {
removeConsole: false,
},
swcMinify: true
}
module.exports = nextConfig
Reference Me:
// url: 'https://www.paypal.com/c2/webapps/mpp/home?locale.x=zh_C2" title="PayPal" onclick="javascript:window.open('https://www.paypal.com/c2/webapps/mpp/home?locale.x=zh_C2','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;"><img src="https://www.paypalobjects.com/digitalassets/c/website/marketing/apac/C2/logos-buttons/optimize/Online_Primary_Acceptance_Mark_RGB_V2.jpg'
//next.config.js
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
images: {
remotePatterns: [{
protocol: 'https',
hostname: 'paypalobjects.com',
port: '',
pathname: '/digitalassets/c/website/marketing/apac/C2/logos-buttons/optimize/Online_Primary_Acceptance_Mark_RGB_V2.jpg'
}]
}
}
module.exports = nextConfig
//xxx.tsx
...
<Image
src = {
"https://paypalobjects.com/digitalassets/c/website/marketing/apac/C2/logos-buttons/optimize/Online_Primary_Acceptance_Mark_RGB_V2.jpg"
}
alt = 'PayPal'
//fill
width = {200}
height = {127}
/>
Related
I am working on a project and trying to make www.mydomain.com work. I am working on localhost:3000 and when I put in url: mydomain.com:3000 it works but when I set www.mydomian.com:3000 it redirects me on mydomain.is which is my main page.
this is my code in next.config.js file
const path = require("path");
const redirects = require("./redirects");
/** #type {import('next').NextConfig} */
const nextConfig = async () => {
return {
reactStrictMode: false,
swcMinify: true,
sassOptions: {
includePaths: [path.join(__dirname, "src/styles")],
},
redirects() {
return Promise.resolve(redirects);
},
images: {
domains: ["mydomain.cdn.prismic.io", "images.prismic.io"],
},
i18n: {
// https://nextjs.org/docs/advanced-features/i18n-routing
localeDetection: false,
locales: ["is", "en"],
defaultLocale: "is",
domains: [
{
domain: 'mydomain.is',
defaultLocale: 'is',
},
{
domain: 'mydomain.com',
defaultLocale: 'en',
},
],
},
};
};
module.exports = nextConfig;`
I have this big issue with starting Next.js, the same project on 2 different OS, it has completely different startup times, 1s on MacOSX vs 10s on Windows 11.
Has anyone else had the same problem? Is there any way to fix it?
enter image description here
Here's my next.js conf:
const { resolve } = require('path')
const withBundleAnalyzer = require('#next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
openAnalyzer: true,
})
module.exports = withBundleAnalyzer(
{
i18n: {
locales: ['en', 'it'],
defaultLocale: 'en',
localeDetection: true,
},
compiler: {
removeConsole: process.env.NODE_ENV !== 'development',
},
swcMinify: true,
eslint: {
ignoreDuringBuilds: true,
},
webpack: (config) => {
config.plugins = config.plugins || []
config.optimization.providedExports = true
config.resolve.alias = {
...config.resolve.alias,
'#': resolve(__dirname, './src/'),
}
config.resolve.fallback = { ...config.resolve.fallback, fs: false }
config.module.rules.push({
test: /\.(glsl|vs|fs|vert|frag)$/,
use: ['raw-loader', 'glslify-loader'],
})
return config
},
},
)
I'm using nextjs. I'm using sass For style layout. All styles are named with *.module.scss, and they are placed in the components folder and its subfolders and not in the styles folder mentioned by the nextjs document. I don't know how to config this situation in next.config.js. Content of my next.config.js is now:
const withPlugins = require("next-compose-plugins");
const nextTranslate = require("next-translate");
const withPWA = require("next-pwa");
const withBundleAnalyzer = require("#next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});
// next.js configuration
const nextConfig = {
images: {
domains: ['ibexcdn.com'],
},
};
module.exports = withPlugins(
[
[
nextTranslate,
{
webpack: (config, { isServer, webpack }) => {
return config;
},
},
],
withBundleAnalyzer,
[
withPWA,
{
pwa: {
disable: process.env.NODE_ENV === "development",
dest: 'public',
runtimeCaching: [
{
urlPattern: /.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
handler: 'NetworkFirst',
options: {
cacheName: 'static-font-assets',
expiration: {
maxEntries: 4,
maxAgeSeconds: 7 * 24 * 60 * 60 // 7 days
}
}
}
]
},
},
],
],
nextConfig,
);
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I tried multiple approaches on the web corresponding the issue but nothing seemed to work.
I have not been able to find a solution to this problem.
This is what my next.config.js file looks like
const withPlugins = require('next-compose-plugins')
const withImages = require('next-images')
const CompressionPlugin = require('compression-webpack-plugin')
const withBundleAnalyzer = require('#next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
let prefixUrl = ''
let imgLoaderUrl = ''
switch (process.env.ENV) {
case 'production':
prefixUrl = 'https://webstatic.circleslive.com'
imgLoaderUrl = 'https://webstatic.circleslive.com'
break
case 'staging':
prefixUrl = 'https://staging-webstatic.circleslive.com'
imgLoaderUrl = 'https://staging-webstatic.circleslive.com'
break
case 'development':
prefixUrl = ''
imgLoaderUrl = '/_next/image'
break
default:
prefixUrl = ''
imgLoaderUrl = '/_next/image'
break
}
const nextConfig = {
poweredByHeader: false,
trailingSlash: false,
compress: true,
future: {
webpack5: true,
},
env: {
ENV: process.env.ENV,
},
serverRuntimeConfig: {
STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
},
images: {
loader: 'default',
path: imgLoaderUrl,
},
webpack: (config) => {
config.optimization.minimize = true
config.plugins.push(
new CompressionPlugin({
test: /\.js$|\.css$|\.html$/,
}),
)
return config
},
build: {
extend(config) {
config.module.rules.push({
options: {
fix: true,
},
})
},
},
}
module.exports = withPlugins(
[
[
withImages,
{
assetPrefix: prefixUrl,
dynamicAssetPrefix: true,
inlineImageLimit: false,
},
],
[withBundleAnalyzer],
],
nextConfig,
)
Try the following:
module.exports = withPlugins(
[
[
{
assetPrefix: prefixUrl,
dynamicAssetPrefix: true,
inlineImageLimit: false,
},
],
[withBundleAnalyzer],
],
withImages(nextConfig)
)
I'm trying to reduce the bundle size of my site by using https://www.npmjs.com/package/#next/bundle-analyzer
At the moment, when I run npm analyze with
"analyze": "cross-env ANALYZE=true next build",
It isn't outputting the html files with the visualization needed.
This is my next.config.js
const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')
const withBundleAnalyzer = require('#next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
module.exports = withPWA({
pwa: {
dest: 'public',
runtimeCaching,
},
poweredByHeader: false,
},
withBundleAnalyzer(),
)
using this nextjs-analyze-app-bundle tutorial.
What is going wrong?
Looks like this has been answered on Vercel's issues board. Copying their solution here:
These plugins are functions that enhance the configuration object, so
you have to wrap them instead of providing them as arguments:
const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')
const withBundleAnalyzer = require('#next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer(withPWA({
pwa: {
dest: 'public',
runtimeCaching,
},
poweredByHeader: false,
}));
Before I was doing it like this,
module.exports = withBundleAnalyzer(
withPWA({
pwa: {
dest: 'public',
runtimeCaching,
},
poweredByHeader: false,
})
)
module.exports =
{
env: {
BASE_URL: process.env.BASE_URL,
},
future: {
webpack5: true,
},
reactStrictMode: true,
}
Not sure but I think you should only need to have one module.exports so I wrapped my other stuff inside the withBundleAnalyzer like this
module.exports = withBundleAnalyzer(
withPWA({
pwa: {
dest: 'public',
runtimeCaching,
},
poweredByHeader: false,
}),
{
env: {
BASE_URL: process.env.BASE_URL,
},
future: {
webpack5: true,
},
reactStrictMode: true,
}
)