Feature to Add <link rel="next/prev" href="..." > in head. #52923

umang-goyal · 2023-07-20T07:13:27Z

umang-goyal
Jul 20, 2023

Unable to find how to add or <link rel="prev> in Metadata.
https://nextjs.org/docs/app/building-your-application/optimizing/metadata

Answered by matteopaoli

Aug 30, 2023

I've just found out there is a workaround which consist in injecting custom <link /> tags using the icons object in the Metadata API

export const metadata: Metadata = {
  title: 'example.com,
  description: "The Galaxy's Best Coffee",
  icons: {
    other: [
     { rel: 'next', url: 'https://example.com/search?page=3' },
     { rel: 'prev', url: 'https://example.com/search?page=1' },
    ]
  }
}

I've just inserted this on my website and seems to work correctly.
This is the output

<link rel="next" href="https://example.com/search?page=3">
<link rel="prev" href="https://example.com/search?page=1">

View full answer

matteopaoli · 2023-07-26T12:04:33Z

matteopaoli
Jul 26, 2023

1 reply

insanity54 Aug 29, 2023

@matteopaoli I don't think that answers the question. putting values inside metadata.other creates a <meta> tag. The OP (and I) are asking for how to create a <link> tag.

From the docs

Next.js has a Metadata API that can be used to define your application metadata (e.g. meta and link tags inside your HTML head element) for improved SEO and web shareability.

The docs do not mention anything further regarding link tags.

insanity54 · 2023-08-29T20:47:35Z

insanity54
Aug 29, 2023

I was looking to do this on my next.js 13 app, so visiting web browsers were made aware of my RSS feed. To do this, I needed to put a <link> tag inside <head>.

From browsing discussions, it looks like this isn't supported using a statically defined Metadata object.

Here's what I did to get this to work.

import { ReactNode } from 'react'
import Footer from "./components/footer"
import Navbar from "./components/navbar"
import "../assets/styles/global.sass";
import "@fortawesome/fontawesome-svg-core/styles.css";
import { AuthProvider } from './components/auth'
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'example.com,
  description: "The Galaxy's Best Coffee",
  other: {
    RATING: 'RTA-5042-1996-1400-1577-RTA'
  }
}

type Props = {
  children: ReactNode;
}


export default function RootLayout({
  children,
}: Props) {
  return (
    <html lang="en">
      <head>
        <link rel="alternate" type="application/atom+xml" title="ATOM" href="/feed/feed.xml" />
        <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/feed.rss" />
        <link rel="alternate" type="application/json" title="JSON" href="/feed/feed.json" />
      </head>
      <body>
        <AuthProvider>
          <Navbar />
          <div className="container">
            {children}
            <Footer />
          </div>
        </AuthProvider>
      </body>
    </html>
  )
}

In the above code, I defined my own <head> tag with the necessary <link> tags. Next must merge this tag with the metadata, because I'm seeing all the <meta> and <link> tags in the rendered output.

0 replies

matteopaoli · 2023-08-30T02:14:51Z

matteopaoli
Aug 30, 2023

I've just found out there is a workaround which consist in injecting custom <link /> tags using the icons object in the Metadata API

export const metadata: Metadata = {
  title: 'example.com,
  description: "The Galaxy's Best Coffee",
  icons: {
    other: [
     { rel: 'next', url: 'https://example.com/search?page=3' },
     { rel: 'prev', url: 'https://example.com/search?page=1' },
    ]
  }
}

I've just inserted this on my website and seems to work correctly.
This is the output

<link rel="next" href="https://example.com/search?page=3">
<link rel="prev" href="https://example.com/search?page=1">

2 replies

kirstymullen Jul 15, 2024

Having tried this workaround, it's worth noting that it overrides the file-based API for your actual icons (which is the recommended approach) so they no longer work.

ung0v Aug 7, 2024

Having tried this workaround, it's worth noting that it overrides the file-based API for your actual icons (which is the recommended approach), so they no longer work.

You can get the parent metadata: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
Here's an example

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
 return {
  title: 'example.com,
  description: "The Galaxy's Best Coffee",
  icons: {
    other: [
     ...(await parent).icons,
     { rel: 'next', url: 'https://example.com/search?page=3' },
     { rel: 'prev', url: 'https://example.com/search?page=1' },
    ]
  }
 }
}

mediabeastnz · 2023-11-26T21:32:22Z

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature to Add <link rel="next/prev" href="..." > in head. #52923

{{title}}

Replies: 4 comments 6 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Feature to Add <link rel="next/prev" href="..." > in head. #52923

Replies: 4 comments · 6 replies

Replies: 4 comments 6 replies