Links
Using Next.js Link component for inline links in body fields.
To replace inline `<a />` tags with the Next.js `Link` component, we can use an html parser like we did for images.
Dependencies
Install html-react-parser.
yarn add html-react-parserComponent
Update the component from images to handle inline links.
components/body.tsx
import { HTMLReactParserOptions, domToReact } from "html-react-parser" import { Element } from "domhandler/lib/node"import parse from "html-react-parser"import Image from "next/image"import Link from "next/link"
const options: HTMLReactParserOptions = { replace: (domNode) => { if (domNode instanceof Element && domNode.name === "img") { const { src, alt, width, height } = domNode.attribs
return ( <Image src={`${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/${src}`} width={`${width}px`} height={`${height}px`} alt={alt} layout="intrinsic" objectFit="cover" /> ) }
if (domNode.name === "a") { const { href, class: className } = domNode.attribs
return ( <Link href={href} passHref> <a className={className}>{domToReact(domNode.children)}</a> </Link> ) } },}
export function Body({ value }: { value: string }) { return <>{parse(value, options)}</>}Usage
pages/index.tsx
import { Body } from "components/body"
export default function Page({ node }) { return ( <div variant="container"> <h1>{node.title}</h1> <Body value={node.body.processed} /> </div> )}Learn more about next/link.