Is there a way to fetch the favicons?

Answered

Mini Satin posted this in #help-forum

Mini SatinOP

2023-11-07T14:16:42.000Z

I currently use favicons from my assets, is there I way I can make a request from the server side and display it on the screen with a server component?

This is my current code to show the favicons.

import "@/globals.css";
import { ReactNode } from "react";
import type { Metadata } from "next";
import { Montserrat } from "next/font/google";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";

const montserrat = Montserrat({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Proccedure",
  description: "Proccedure description",
  icons: {
    icon: [
      {
        media: "(prefers-color-scheme: dark)",
        url: "/assets/favicon-light.svg",
        href: "/assets/favicon-light.svg",
      },
      {
        media: "(prefers-color-scheme: light)",
        url: "/assets/favicon-dark.svg",
        href: "/assets/favicon-dark.svg",
      },
    ],
  },
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body className={`${montserrat.className} pt-navbar`}>
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>
  );
}

Answered by riský

you can use generateMetadata to be able to run cms fetch and get url

View full answer

20 Replies

riský

2023-11-07T14:18:07.000Z

assuming assets is in public folder, you should use <img> or next/image

Mini SatinOP

2023-11-07T14:18:29.000Z

You mean, instead of svg?

riský

2023-11-07T14:18:48.000Z

you can import svg with image just like png (but with svg extension)

Mini SatinOP

2023-11-07T14:18:57.000Z

But is there a way I can fetch the url to display from an API?

Instead of hard-coding it

I have a CMS that I want to have control of all the application

riský

2023-11-07T14:19:34.000Z

fetch that url in server component and specify the image link?

Mini SatinOP

2023-11-07T14:21:29.000Z

yes

or a server action/ api route

riský

2023-11-07T14:22:18.000Z

you could use route handler and redirect, but if you can get the value in server component, thats best

Mini SatinOP

2023-11-07T14:22:53.000Z

Do you have an example how to do this?

riský

2023-11-07T14:24:24.000Z

im not sure if i understand how your project works specificly, but if you to a request to cms to get a url, you should be able to use that in a img

Mini SatinOP

2023-11-07T14:27:18.000Z

I want to do this somehow

import "@/globals.css";
import { ReactNode } from "react";
import type { Metadata } from "next";
import { Montserrat } from "next/font/google";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";

const montserrat = Montserrat({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Proccedure",
  description: "Proccedure description",
  icons: {
    icon: [
      {
        media: "(prefers-color-scheme: dark)",
        url: `${url_fetched_from_the_cms}`,
        href: `${url_fetched_from_the_cms}`,
      },
      {
        media: "(prefers-color-scheme: light)",
        url: `${url_fetched_from_the_cms}`,
        href: `${url_fetched_from_the_cms}`,
      },
    ],
  },
};

export default function RootLayout({ children }: { children: ReactNode }) {
  // ... request to cms
  return (
    <html lang="en">
      <body className={`${montserrat.className} pt-navbar`}>
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>
  );
}