garmeeh / next-seo

Next SEO is a plug in that makes managing your SEO easier in Next.js projects.
MIT License
7.59k stars 391 forks source link

additionalLinkTags does not support "as" and "crossorigin" attributes #910

Closed nyedidikeke closed 2 years ago

nyedidikeke commented 2 years ago

When adding link tags that are not handled by default, attempt to include the as and crossorigin attributes result into a TypeScript error TS2769.

TypeScript Error ```sh > tsc pages/_app.tsx:21:7 - error TS2769: No overload matches this call. Overload 2 of 2, '(props: NextSeoProps, context: any): NextSeo', gave the following error. Type '{ rel: string; href: string; crossOrigin: string; }' is not assignable to type 'LinkTag'. Object literal may only specify known properties, and 'crossOrigin' does not exist in type 'LinkTag'. Overload 2 of 2, '(props: NextSeoProps, context: any): NextSeo', gave the following error. Type '{ rel: string; href: string; as: string; type: string; crossOrigin: string; }' is not assignable to type 'LinkTag'. Object literal may only specify known properties, and 'as' does not exist in type 'LinkTag'. 21 ~~~~~~~~ Found 1 error. ```

It will be great to add them as optional attributes to the link tag so as to enable preloading of resources for performance optimisation.

The following is the attempted additionalLinkTags configuration.

// _app.tsx
import type { AppProps } from 'next/app'
import { DefaultSeo, NextSeo } from 'next-seo'
import SEO from '../next-seo.config'
import '../styles/globals.css'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <DefaultSeo {...SEO} />
      <NextSeo
        additionalLinkTags={[
          {
            rel: 'preload',
            href: '/font/nunito-v20-latin-regular.woof2',
            as: 'font',
            type: 'font/woff2',
            crossOrigin: 'anonymous'
          }
        ]}
      />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp
robsonkades commented 2 years ago

i have the same problem