var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var u=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),g=(a,e)=>{for(var s in e)c(a,s,{get:e[s],enumerable:!0})},o=(a,e,s,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!N.call(a,t)&&t!==s&&c(a,t,{get:()=>e[t],enumerable:!(l=d(e,t))||l.enumerable});return a};var w=(a,e,s)=>(s=a!=null?h(k(a)):{},o(e||!a||!a.__esModule?c(s,"default",{value:a,enumerable:!0}):s,a)),f=a=>o(c({},"__esModule",{value:!0}),a);var i=u((v,r)=>{r.exports=_jsx_runtime});var L={};g(L,{default:()=>b,frontmatter:()=>y});var n=w(i()),y={title:"How to use Chakra UI Button and Link components with NextJS Link",description:`There is some glue to add to make Chakra UI and NextJS work together. The Chakra UI components do not generate the "a" tag by default for a link. Let's see how to use the Chakra button to generate links between pages.`,image:"/images/nextjs.jpg",slug:"chakra-link-button-nextjs-link",tags:["javascript","react","nextjs","chakra"],locale:"en",updated:new Date(1675523857429),created:new Date(1675523857429)};function p(a){let e=Object.assign({p:"p",code:"code",h2:"h2",a:"a",span:"span",pre:"pre"},a.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:["Chakra UI and Next.js work great together but there is some glue to add to make them work together. My last experiment about it was with the Button and Link Chakra UI components and the Next.js Link components for a website where SEO is important. The Chakra UI components do not generate the HTML ",(0,n.jsx)(e.code,{children:""})," tags as I first expected and that broke the website's internal links."]}),` `,(0,n.jsxs)(e.h2,{id:"a-non-optimal-way-to-use-chakra-button-with-nextjs-link",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#a-non-optimal-way-to-use-chakra-button-with-nextjs-link",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"A non-optimal way to use Chakra Button with Next.js Link"]}),` `,(0,n.jsx)(e.p,{children:"As a first tentative to create a link with a button, I write this React code."}),` `,(0,n.jsx)(e.pre,{className:"language-ts",children:(0,n.jsxs)(e.code,{className:"language-ts code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," Button ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'@chakra-ui/react'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," NextLink ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'next/link'"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," MyButton",(0,n.jsx)(e.span,{className:"token operator",children:":"})," React",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function-variable function",children:"FC"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"NextLink href",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"https://app.filendy.com"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"Button",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` Get Started `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"Button",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"NextLink",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,n.jsx)(e.p,{children:"This code renders the following DOM nodes and some JS code to make the link behavior works which works great for user interaction."}),` `,(0,n.jsx)(e.pre,{className:"language-html",children:(0,n.jsx)(e.code,{className:"language-html code-highlight",children:(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"type"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"button",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"class"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"chakra-button css-1t9x4xi",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Get Started",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]})})}),` `,(0,n.jsx)(e.p,{children:"The user views a button, then click on it, and finally, the browser navigates to the new link. Everything is right, isn't it? Not really since this is not a link for crawlers. In my case, it is ahrefs crawler that warns me about some Orphan Pages. Since every link is not rendered as a link, the crawler detects no internal link. The internal linking is broken."}),` `,(0,n.jsxs)(e.h2,{id:"a-better-way",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#a-better-way",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"A better way"]}),` `,(0,n.jsxs)(e.p,{children:["To replace the ",(0,n.jsx)(e.code,{children:"button"})," tag with an ",(0,n.jsx)(e.code,{children:"a"})," tag, you must first ",(0,n.jsx)(e.code,{children:"passHref"})," to the child components from the Next Link components and use the ",(0,n.jsx)(e.code,{children:"as"})," props with the tag ",(0,n.jsx)(e.code,{children:"a"})," to render the Chakra button as a link."]}),` `,(0,n.jsx)(e.pre,{className:"language-ts",children:(0,n.jsxs)(e.code,{className:"language-ts code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," Button ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'@chakra-ui/react'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," NextLink ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'next/link'"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," MyButton",(0,n.jsx)(e.span,{className:"token operator",children:":"})," React",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function-variable function",children:"FC"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"NextLink href",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"https://app.filendy.com"'})," passHref",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"Button ",(0,n.jsx)(e.span,{className:"token keyword",children:"as"}),(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"a"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` Get Started `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"Button",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"NextLink",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,n.jsx)(e.p,{children:"Here is the HTML generated from the code above:"}),` `,(0,n.jsx)(e.pre,{className:"language-html",children:(0,n.jsx)(e.code,{className:"language-html code-highlight",children:(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"a"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"class"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"chakra-button css-13t2jeh",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"href"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"https://app.filendy.com",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Get Started",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]})})}),` `,(0,n.jsx)(e.p,{children:"This is the same behavior with the Chakra UI Link and the same solutions. Here is an example with the Chakra Link:"}),` `,(0,n.jsx)(e.pre,{className:"language-ts",children:(0,n.jsxs)(e.code,{className:"language-ts code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," Link ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'@chakra-ui/react'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," NextLink ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'next/link'"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," MyButton",(0,n.jsx)(e.span,{className:"token operator",children:":"})," React",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function-variable function",children:"FC"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"NextLink href",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"https://app.filendy.com"'})," passHref",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"Link ",(0,n.jsx)(e.span,{className:"token keyword",children:"as"}),(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"a"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` Get Started `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"Link",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"NextLink",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]})]})})]})}function x(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(p,a)})):p(a)}var b=x;return f(L);})(); ;return Component;

chakra

Posts

How to use Chakra UI Button and Link components with NextJS Link