Next.js Discord

Discord Forum

install older version of nextjs or fix guide

Answered
Pembroke Welsh Corgi posted this in #help-forum
Open in Discord
Pembroke Welsh CorgiOP
I'm trying to follow along with https://vercel.com/guides/wordpress-with-vercel, but it installs the latest nextjs which doesn't work with gravatar (remote patterns). I've tried adding gravatar to config, but then that just brought up another error. fixed that, then another error to do with next/img. How can I do this with an older version? Can you specify which nextjs is installed?

Code I added to config to fix the problem which in turn resulted in another error:
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '1.gravatar.com',
        pathname: '/**',
      },
    ],
  },
  async rewrites() {
    return [
      {
        source: '/avatar/:hash',
        destination: 'https://1.gravatar.com/avatar/:hash',
      },
    ];
  },
};
Answered by Clown
1) you could try using the normal <img>. IIRC remotePattern only works with next/image

2) i think that hostname should be just "**.gravatar.com", maybe try losing that pathname argument too cause its seems useless in this case.
View full answer

16 Replies

Clown
1) you could try using the normal <img>. IIRC remotePattern only works with next/image

2) i think that hostname should be just "**.gravatar.com", maybe try losing that pathname argument too cause its seems useless in this case.
Answer
Clown
Also have you confirmed if the gravatar imgs start with a subdomain?
Also i dont see any errors here. What are the errors you are facing?
Pembroke Welsh CorgiOP
well I figured out how to install an earlier version but the problem still persists.
So now the question needs to be: How do you install headless Wordpress when it uses gravatar?
So first you get this error: then fixing the config the same error... I was trying to replicate the other error I was getting, but Now it's still stuck on that one.
Complete code for next.config.js
if (!URL.canParse(process.env.WORDPRESS_API_URL)) {
  throw new Error(`
    Please provide a valid WordPress instance URL.
    Add to your environment variables WORDPRESS_API_URL.
  `)
}

const { protocol, hostname, port, pathname } = new URL(
  process.env.WORDPRESS_API_URL
)

/** @type {import('next').NextConfig} */
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.gravatar.com',
        pathname: '/**',
      },
    ],
  },
  async rewrites() {
    return [
      {
        source: '/avatar/:hash',
        destination: 'https://1.gravatar.com/avatar/:hash',
      },
    ];
  },
};
@Clown 1) you could try using the normal <img>. IIRC remotePattern only works with next/image 2) i think that hostname should be just "**.gravatar.com", maybe try losing that pathname argument too cause its seems useless in this case.
Pembroke Welsh CorgiOP
I have no idea where this "gravatar" call is in the files. I've had 'find' open while opening all files and scanning quickly with my eyes but nothing comes up.
I assume it's coming from avatar.tsx and pulling straight from WP. 
import Image from 'next/image'

export default function Avatar({ author }) {
  const isAuthorHaveFullName = author?.node?.firstName && author?.node?.lastName
  const name = isAuthorHaveFullName
    ? `${author.node.firstName} ${author.node.lastName}`
    : author.node.name || null

  return (
    <div className="flex items-center">
      <div className="w-12 h-12 relative mr-4">
        <Image
          src={author.node.avatar.url}
          layout="fill"
          className="rounded-full"
          alt={name}
        />
      </div>
      <div className="text-xl font-bold">{name}</div>
    </div>
  )
}
Pembroke Welsh CorgiOP
changing that to <img /> works... it's just annoying that I wasn't able to actually solve the issue but instead slap a bandaid on it.
Maybe the issue is that the https protocol is not being used?
Try checking different combinations and make sure to restart the dev server in each, like for example try one with just the hostname field.
@Clown Try checking different combinations and make sure to restart the dev server in each, like for example try one with **just** the hostname field.
Pembroke Welsh CorgiOP
Ah yeah... completely missed that it was using http. And for some reason, that vercel template is missing the width prop.
<Image
          src={author.node.avatar.url}
          className="rounded-full"
          alt={name}
          width={350}
          height={350}
        />
      </div>
this is working now.
Pembroke Welsh CorgiOP
and if anyone else is reading this looking for a fix. next.config.js: 
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'http',
        hostname: '**.gravatar.com',
        pathname: '/**',
      },
    ],
  },
  async rewrites() {
    return [
      {
        source: '/avatar/:hash',
        destination: 'http://1.gravatar.com/avatar/:hash',
      },
    ];
  },
};
Pembroke Welsh CorgiOP
Although the rewrites() method is not needed. I grabbed that from another post on here for a similar issue. I just commented that out and it's still working fine. the docs suggest only the "remotepattens" needs to be changed. and seems to line up.

However you shouldn't use this template, it has too many issues:
@Pembroke Welsh Corgi Ah yeah... completely missed that it was using http. And for some reason, that vercel template is missing the width prop.
Clown
There is no way its missing the prop tho :/.

Vercel provides a demo for each template and something like this wouldn't have even compiled with next/image.

Where is the link to the repo you pulled this particular snippet of code from?