Next/image is not responding - next.js

On Next 13, after replacing <img for <Image, the image requests never loads.
Its a Magento image, coming from the product.
However, Magento's server never receives the GET request from next for the image.
For example:
http://localhost:3000/_next/image?url=https%3A%2F%2Fmagento2.magenteiro.com%2Fmedia%2Fcatalog%2Fproduct%2Fcache%2Fcb2ae50ad1efe9ed2d45d11fc48a28dc%2Fl%2Ft%2Flt01.jpg&w=3840&q=75/
I can decode 2 URL's from here:
https://magento2.magenteiro.com/media/catalog/product/cache/cb2ae50ad1efe9ed2d45d11fc48a28dc/l/t/lt01.jpg&w=3840&q=75
https://magento2.magenteiro.com/media/catalog/product/cache/cb2ae50ad1efe9ed2d45d11fc48a28dc/l/t/lt01.jpg
Both would load an image from the remote server, but next never got there.
Am I missing something?
# next.config.js
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
experimental: {appDir: true},
images:{
domains: ['www.floatui.com', 'magento2.magenteiro.com', 'source.unsplash.com']
}
}
module.exports = nextConfig
Part of my productList.jsx component:
{products.map((product) => (
<>
<a key={product.url_key} href={product.url_key} className="group">
<div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
<Image
src={product.image.url}
alt={product.image.label}
title={product.image.label}
fill={true}
className="h-full w-full object-cover object-center group-hover:opacity-75"
/>
</div>
<h3 className="mt-4 text-sm text-gray-700">{product.name}</h3>
<p className="mt-1 text-lg font-medium text-gray-900">$ {product.price_range.minimum_price.final_price.value}</p>
</a>
{product.image.url}
</>
))}
In another attempt to figure this out, I served my /public/images directory with php server, and replaced src="http://localhost:4444/produto2.jpg".
I could confirm that next called the URL, but it never finishes loading the image.
If I add unoptimized={true} forcing Image to request the original image, then it works.

It seems to be a bug on Next in some version between 13.0.0 and 13.0.2.
I started a new project and it worked. The new project was using Next 13.0.3.
So, upgrading Next.js (npm i next#13.*) solved the problem for me.
Note that by doing this, you will be changing your constraint, and newer versions of Next.js 13 may be installed on your system.

Related

Some Tailwind CSS classes using numbers no longer work

When I've started working on my project, which is basic HTML with Tailwind CSS installed, everything worked fine. I could use all values in classes containing numbers, for example text-2xl, text-8xl, text-9xl and ml-2, mt-6 etc.
But something went wrong and now most of these values won't work. I can't use text-2xl/4xl/5xl/6xl/8xl/9xl, but text-3xl/7xl works fine, like it used to when I started working on the project. Same with margins. For example ml-1/2/3/4 wont work, but ml-5 works like it used to.
HTML:
<body class="h-screen w-screen overflow-x-clip scroll-smooth">
<div class="h-screen w-screen flex justify-center bg-gradient-to-bl from-sky-300 to-sky-500">
<div class="h-full w-full grid xl:grid-cols-2 items-center">
<div class="flex flex-col w-full h-full justify-center text-white font-slab">
<h1 class="text-7xl ml-5">Szia!</h1>
</div>
</div>
<img class="absolute w-1/4 md:w-1/12 xl:w-[4%] left-auto right-auto bottom-[5%] animate-bounce"
src="../src/scroll.png" alt="" />
</div>
</body>
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
fontFamily: {
'oswald': ['"Oswald"', 'sans-serif'],
'slab': ['"Roboto Slab"', 'serif'],
},
},
plugins: [],
}
I don't know what I did wrong or what caused this to happen.
I deleted most of the classes which included custom values, like xl:w-[4%], because I though maybe that's what was causing the problem, but as far as I noticed, nothing changed.
I also tried searching for the classes in the web inspector tab, but they aren't being applied at all.
Edit: Deleting Just-In-Time from the config file, then npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch on my folder solved the issue.
May be jit is causing the problem try deleting the jit file from the config
And try watching again using
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

How to use Tailwind Elements in Sveltekit

I'm trying to use a simple Tailwind date picker component in a svelte kit app, however the calendar popup is not appearing. I assume it has something to do with SRR. I was able to make some progress on the installation of Tailwind elements by importing the module with onMount():
import { onMount } from 'svelte';
import { browser } from '$app/env';
onMount(async() => {
if(browser) {
await import('tw-elements');
}
});
However, the calendar icon and the popup are still not rendering. (They also do not render when I include the CDN in app.html). Is there a solution?
tailwind.config.js (P.S. night wind works just fine):
module.exports = {
darkMode: "class",
content: [
'./src/**/*.{html,js,svelte,ts}',
'./node_modules/tw-elements/dist/js/**/*.js'
],
theme: {
extend: {},
},
plugins: [
require("nightwind"),
require("tw-elements/dist/plugin")
],
}
The docs are horrible, but it does work. Here's how I got it going.
In your Svelte Kit layout, import CSS for tw-elements and Font awesome. This is critical because the datepicker icon uses Font Awesome by default, and when you click the icon it opens the picker.
import 'tw-elements/dist/css/index.min.css'
import '#fortawesome/fontawesome-free/css/fontawesome.min.css'
import '#fortawesome/fontawesome-free/css/solid.css'
<div class="datepicker relative form-floating mb-3 xl:w-96">
<input type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
placeholder="Select a date"/>
<label for="floatingInput" class="text-gray-700">Select a date</label>
</div>
In Svelte onMount:
// I didn't even need the if (browser) statement)
// import the library
onMount(async () => {
await import('tw-elements/dist/src/js/index.js')
})
It looks like it is using the MD Bootstrap Datepicker which is a premium feature of MDB Pro and is not free.

Nextjs Image component wont load my images

Nextjs Image component wont load my images, I've tried everything I've come across still nothing.
<div>
{output?.map((item) => (
<div>
{console.log(`${apiUrl}${item.localImage}`)}
<Image
loader={(item) => {
return `${apiUrl}${item.localImage}`;
}}
alt={item.title}
src={`${apiUrl}${item.localImage}`}
layout="fill"
objectFit="contain"
// height={98}
// width={77}
/>
</div>
))}
</div>
The console.log shows the correct image location.
http://localhost:3030/images/b/Painting-with-Both-Hands--Sophie-Walbeoffe.jpg
http://localhost:3030/images/b/DK-The-History-Book.jpg
http://localhost:3030/images/b/Cradle-to-Cradle--(Patterns-of-Life).jpg
http://localhost:3030/images/b/Upstarts.jpg
I have added localhost to next.config.js with the port and without. I think its something to do with the loader.
So what is missing?
I think you can change the code for the loader to:
loader={() => {
return `${apiUrl}${item.localImage}`;
}}

how to fix nextjs prerender error - vercel deployment?

How do I troubleshoot this problem this deployment issue? I am following this tutorial. My node_modules and .next are ignored and not pushed to github. It works locally but can't seem to deploy. I have supplied both the component code as well as the page it's exported on. Let me know if you can see what I am missing.
https://www.youtube.com/watch?v=V4SVNleMitE
deployment errors
Error occurred prerendering page "/components/BlogPosts". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read property 'fields' of undefined
at BlogPosts (/vercel/path0/.next/server/chunks/130.js:39:12)
at d (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
at bb (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
at a.b.render (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
at a.b.read (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
at Object.exports.renderToString (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
at Object.renderPage (/vercel/path0/node_modules/next/dist/server/render.js:673:46)
at Object.defaultGetInitialProps (/vercel/path0/node_modules/next/dist/server/render.js:315:51)
at Function.getInitialProps (/vercel/path0/.next/server/pages/_document.js:645:16)
at Object.loadGetInitialProps (/vercel/path0/node_modules/next/dist/shared/lib/utils.js:69:29)
component blog posts
export default function BlogPosts({post }) {
const {title, information,slug , thumbnail} = post.fields
return (
<div>
<div className='container w-50 h-25 mt-4'>
<Image
className='nav'
src={'https:' + thumbnail.fields.file.url}
width={thumbnail.fields.file.details.image.width}
height={thumbnail.fields.file.details.image.height}
/>
</div>
<div>
<div>
<h4 className=''>{title}</h4>
<Link href={'/contentslug/' + slug}>
<a className='btn btn-primary text-white'>Read more</a>
</Link>
</div>
</div>
</div>
)
}
Pages/Posts
import {createClient} from 'contentful'
import BlogPosts from './components/BlogPosts'
import Nav from './components/Nav'
import Logo from './components/Logo'
export async function getStaticProps() {
const client = createClient({
space: process.env.NEXT_PUBLIC_CONTENTFUL_ID,
accessToken: process.env.NEXT_PUBLIC_CONTENTFUL_TOKEN,
})
const res = await client.getEntries({content_type: 'posts'})
return {
props: {
posts: res.items ,
revalidate: 1
}
}
}
export default function Home({posts}) {
console.log(posts);
return (
<div>
<Logo/>
<Nav/>
<div className="container text-center display-5">
{posts.map(post => (
<BlogPosts key={post.sys.id} post={post}/>
))}
</div>
</div>
)
}
You have fields of undefined. this might be caused because of some strange deploying behavior if you are 100% sure your code works.
How to fix (probably):
Build your project locally. if it works, follow the next step
Comment your code in BlogPosts, inside the exported component. The code must work, so your exported component will be empty but working.
Push this code to Vercel.
Uncommit your code. (done at point 2)
Push again.
P.S. this behavior with API is sometimes caused because of API middleware you reworked.

Nextjs not Rendering Images Stored in Public Folder in Production Only

I'm building a personal website with Nextjs and I'm encountering a weird issue with the Public folder. Per the documentation, static images are to be put in the Public folder. This works perfectly for all images in my local development mode. However, as soon as I push this to production with Vercel, some images would fail to render (showing broken image). I noticed it seems to load jpg images fine but not png / svg. I don't use next-images module and just use a simple tag.
My file structure (simplified) is:
public
static
Melbourne.jpg
avatar.png
pages
index.jsx
In my index.jsx (also super simplied)
function Homepage({ data }) {
return (
<motion.div id='home' initial='initial' animate='enter' exit='exit'>
<section
id='intro'
className='bg-dark flex content-center flex-wrap p-40 justify-center text-center min-h-screen w-screen'>
<div className='flex flex-col justify-center'>
<motion.img
src='/static/avatar.png' <-- Works in Dev but not Prod
className='flex mx-auto rounded-full h-32 w-32'
variants={{
initial: { opacity: 0 },
enter: {
opacity: 1,
transition: {
ease: 'easeIn',
duration: 0.5,
delay: 0.75,
},
},
}}
/>
</div>
</section>
<section id='about' className='bg-light w-screen p-10'>
<div className='h-2 border-t-4 border-dark w-10/12 flex flex-column mx-auto mt-12' />
<div className='w-1/3 mx-auto relative bottom-12 bg-light'>
<h1 className='font-header text-center'>About Me</h1>
</div>
<div className='flex mx-auto mb-8 w-11/12 md:w-3/4 grid grid-cols-3 gap-6 lg:grid-cols-3'>
<div className='py-8 col-span-2'>
Some text here
</div>
<div className=''>
<img
className='rounded-full w-full h-full'
src='/static/Melbourne.jpg' <-- Works in Dev & Prod
alt='melbourne-skyline'
/>
</div>
</div>
</section>
</motion.div>
);
}
export default Homepage;
Please ignore any possible syntax error, everything works on my end and I deleted a lot of things to simplify this. The only issue I'm encountering is the tag.
Thanks in advance for your help!
You have to rebuild [ npm run build ] the project after adding new assets, then commit the changes.

Resources