Next.js Discord

Discord Forum

how to put an icon in nextJS

Unanswered
Briard posted this in #help-forum
Open in Discord
Avatar
BriardOP
I read documentation but i still dont understand how to set an icon for nextjs

im using app router i setted this file inside src/app but it didn't work
import { ImageResponse } from "next/og";

// Image metadata
export const size = {
  width: 32,
  height: 32,
};
export const contentType = "image/png";

// Image generation
export default function Icon() {
  return new ImageResponse(
    (
      // ImageResponse JSX element
      <div
        style={{
          fontSize: 24,
          background: "black",
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "white",
        }}
      >
        A
      </div>
    ),
    // ImageResponse options
    {
      // For convenience, we can re-use the exported icons size metadata
      // config to also set the ImageResponse's width and height.
      ...size,
    }
  );
}

5 Replies

Avatar
BriardOP
is this red
my app is only one page , how can i optimize seo for this one page?
Avatar
Masai Lion
if you want to load an image/icon, why not just use the Image provided by next.js directly, it is optimized and can take different file format.
Avatar
BriardOP
thanks for answering do u have any clue about second question
Avatar
Masai Lion
checkout your Ttitle description, add og tag. Speed also matters, for performance, check large images, your html structure, this means your h1 h2 h3 tags