How to deal with mapping <link> elements in <Head> ? #16652

smugller · 2020-08-28T14:25:43Z

smugller
Aug 28, 2020

I have a Layout.tsx component and I want to preload fonts depends or what page is. I want to import font list from array and insert the HTML code into tags. My fonts are located in /public/fonts/ for now, later I want to export them on CDN but now it's not really important. This is my actual code and it's works but...:

// Import Next.js Head
import Head from "next/head";
// Import CSS Styled Components
import { AppContainer } from "@styles/styles";
// Import Header and Footer components
import { AppHeader    } from "@components/templates/Header";
import { AppFooter    } from "@components/templates/Footer";
// Import Layout Interface
import { LayoutProps  } from "@interfaces/types";

const Layout: React.FunctionComponent <LayoutProps> = ({ children, pageTitle }) => {
  return (
    <>
      <Head>
        <title>{pageTitle}</title>

        <link
          rel="preload"
          href="/fonts/Lato-Bold.woff2"
          as="font"
          type="font/woff2"
          crossOrigin="anonymous"
        />
        <link
          rel="preload"
          href="/fonts/Lato-Bold.woff"
          as="font"
          type="font/woff2"
          crossOrigin="anonymous"
        />
        <link
          rel="preload"
          href="/fonts/Open-Sans.woff2"
          as="font"
          type="font/woff2"
          crossOrigin="anonymous"
        />
        <link
          rel="preload"
          href="/fonts/Open-Sans.woff"
          as="font"
          type="font/woff2"
          crossOrigin="anonymous"
        />
      </Head>

      <AppHeader />

      <AppContainer>
        {children}
      </AppContainer>

      <AppFooter />
    </>
  )
}
export default Layout;

As you can see it's start being a bit messy when i put this tag manually.

I wanna do something like that:

// Import Next.js Head
import Head from "next/head";
// Import CSS Styled Components
import { AppContainer } from "@styles/styles";
// Import Header and Footer components
import { AppHeader    } from "@components/templates/Header";
import { AppFooter    } from "@components/templates/Footer";
// Import Layout Interface
import { LayoutProps  } from "@interfaces/types";

const Layout: React.FunctionComponent <LayoutProps> = ({ children, pageTitle }) => {

  const fontsList = [
    {
      fontName   : "Lato Bold",
      fontStyle  : "normal",
      fontWeight : "700"
    },
    {
      fontName   : "Lato Black",
      fontStyle  : "normal",
      fontWeight : "900"
    },
    {
      fontName   : "Open Sans",
      fontStyle  : "normal",
      fontWeight : "400"
    }
  ];

  return (
    <>
      <Head>
        <title>{pageTitle}</title>
        
        {fontsList.map((font) => (
              <link
                rel="preload"
                href={"/fonts/" + font.fontName + ".woff2"}
                as="font"
                type="font/woff2"
                crossOrigin="anonymous"
              />
              <link
                rel="preload"
                href={"/fonts/" + font.fontName + ".woff2"}
                as="font"
                type="font/woff2"
                crossOrigin="anonymous"
              />
            )
          )
        }

      </Head>

      <AppHeader />

      <AppContainer>
        {children}
      </AppContainer>

      <AppFooter />
    </>
  )
}
export default Layout;

Or maybe pass the array to props with fonts that I want to use on different page/component.

Problem:
The link tag is not rendering in Head tag. Why?

Thanks guys and I just started my adventure with Next.js :)

Answered by balazsorban44

Aug 29, 2020

From the docs:

title, meta or any other elements (e.g. script) need to be contained as direct children of the Head element, or wrapped into maximum one level of <React.Fragment> or arrays—otherwise the tags won't be correctly picked up on client-side navigations.

Now, it might be the case that a single .map might just work, try adding <></> around the returned <link> tags, as JSX expects only one element in returns. If it still does not work, you probably need to define each link as a direct child in Head. If it's only 3 fonts, it's not that bad either. Remember, sometimes readability outweighs "optimal". I mean, does a single map really help that much to clean up the code? Correct me, …

View full answer

daveteu · 2020-08-28T21:00:05Z

daveteu
Aug 28, 2020

for a start, your font Name has space.

1 reply

smugller Aug 29, 2020
Author

It doesn't matter .replace(/\s+/g , "-") solved the problem.

balazsorban44 · 2020-08-29T00:17:27Z

balazsorban44
Aug 29, 2020
Maintainer

From the docs:

title, meta or any other elements (e.g. script) need to be contained as direct children of the Head element, or wrapped into maximum one level of <React.Fragment> or arrays—otherwise the tags won't be correctly picked up on client-side navigations.

Now, it might be the case that a single .map might just work, try adding <></> around the returned <link> tags, as JSX expects only one element in returns. If it still does not work, you probably need to define each link as a direct child in Head. If it's only 3 fonts, it's not that bad either. Remember, sometimes readability outweighs "optimal". I mean, does a single map really help that much to clean up the code? Correct me, if you have a proper reason for that approach.

I am also curious how many different fonts do you plan to import on the entire site? Maybe it is even more cost efficient to just preload all of them in a custom _document instead of importing in each page?

2 replies

smugller Aug 29, 2020
Author

Thanks mate, You really helped me. I forgot to wrap components with React Fragment tags. <> </> or <.Fragment> </.Fragment>.

Everything is working now.

Cheers guys.

balazsorban44 Aug 29, 2020
Maintainer

Could you please mark my reply as the answer, so future visitors immediately see this is an answered discussion? :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How to deal with mapping <link> elements in <Head> ? #16652

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

How to deal with mapping <link> elements in <Head> ? #16652

Uh oh!

smugller Aug 28, 2020

Replies: 2 comments · 3 replies

Uh oh!

daveteu Aug 28, 2020

Uh oh!

smugller Aug 29, 2020 Author

Uh oh!

Uh oh!

balazsorban44 Aug 29, 2020 Maintainer

Uh oh!

Uh oh!

smugller Aug 29, 2020 Author

Uh oh!

Uh oh!

balazsorban44 Aug 29, 2020 Maintainer

smugller
Aug 28, 2020

Replies: 2 comments 3 replies

daveteu
Aug 28, 2020

smugller Aug 29, 2020
Author

balazsorban44
Aug 29, 2020
Maintainer

smugller Aug 29, 2020
Author

balazsorban44 Aug 29, 2020
Maintainer