How to use .svg in nextJS 14 app router?

[ripe skiff]

Hi @flint sparrow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To set up a static .svg file in the /public folder to be used in a client-side component in Next.js, you can follow these steps:

1. Place your .svg file in the /public folder. This folder is used by Next.js to serve static assets like images, fonts, and other files. The files inside /public can be referenced by your code starting from the base URL (/). For example, if your file is named image.svg, you would place it in /public/image.svg.

2. In your client-side component, you can reference the .svg file starting from the base URL. For example, if you're using an img tag in your component, you can set the src attribute to "/image.svg".

Here's an example of how you can use it in a component:

function MyComponent() {
  return <img src="/image.svg" alt="My SVG Image" />;
}

Please note that the default loader in Next.js does not optimize SVG images for a few reasons. If you need to serve SVG images with the default Image Optimization API, you can set dangerouslyAllowSVG inside your next.config.js:

module.exports = {
 images: {
 dangerouslyAllowSVG: true,
 contentDispositionType: 'attachment',
 contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
 },
}

It is strongly recommended to also set contentDispositionType to force the browser to download the image, as well as contentSecurityPolicy to prevent scripts embedded in the image from executing.

Sources:

• Next.js Docs: Optimizing Static Assets (https://nextjs.org/docs/app/building-your-application/optimizing/static-assets)
• Next.js Docs: Image Component and Image Optimization (https://nextjs.org/docs/app/api-reference/components/image)

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@flint sparrow kapa.ai is still learning and improving, please let us know how it did by reacting below

[flint sparrow]

@ripe skiff can you explain the parameters for the /next/font module?

[ripe skiff]

Let me check the knowledge base for you. One moment! :books:

---

Sure, the /next/font module in Next.js has several parameters that you can use to customize the behavior of your fonts. Here are some of them:

1. preload: This is a boolean value that specifies whether the font should be preloaded or not. The default is true. It is used in both next/font/google and next/font/local. For example, you can set preload: false if you don't want the font to be preloaded. source (https://nextjs.org/docs/app/api-reference/components/font)

2. style: This parameter defines the font style. It can be a string value with a default value of 'normal' or an array of style values if the font is not a variable google font (applies to next/font/google only). It is used in both next/font/google and next/font/local. For example, you can set style: 'italic' for next/font/google or style: 'oblique' for next/font/local. source (https://nextjs.org/docs/app/api-reference/components/font)

3. adjustFontFallback: This parameter is used to set whether an automatic fallback font should be used to reduce Cumulative Layout Shift. For next/font/google, it's a boolean value with a default of true. For next/font/local, it can be a string or boolean false value with possible values of 'Arial', 'Times New Roman' or false (default is 'Arial'). For example, you can set adjustFontFallback: false for next/font/google or adjustFontFallback: 'Times New Roman' for next/font/local. source (https://nextjs.org/docs/app/api-reference/components/font)

Please note that these parameters are optional and can be used according to your needs.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@flint sparrow kapa.ai is still learning and improving, please let us know how it did by reacting below

[flint sparrow]

@ripe skiff how can i apply the font for the whole project to use by default?

[ripe skiff]

Let me check the knowledge base for you. One moment! :books:

---

To apply a font for the whole project by default, you can import the font in your _app.js or _app.tsx file and apply it to the root HTML element. Here's an example using Google Fonts:

import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <style jsx global>{`
        html {
          font-family: ${inter.style.fontFamily};
        }
      `}</style>
      <Component {...pageProps} />
    </>
  )
}

In this example, the Inter font is imported from next/font/google and applied to the html element, which makes it the default font for the whole project. The subsets: ['latin'] option is used to specify the subset of the font to use.

You can replace Inter with any other font you want to use. If you want to use a local font, you can import it from next/font/local instead.

This code should be placed in your _app.js or _app.tsx file, which is the top-level component that will be used for all pages in your Next.js app. By setting the font in this file, you ensure that it will be applied globally across your entire project.

Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/optimizing/fonts)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: