"})," blocks."]}),(0,n.jsxs)(e.h2,{id:"line-highlighting-and-line-numbers",children:[(0,n.jsx)(e.a,{href:"#line-highlighting-and-line-numbers","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Line highlighting and line numbers"]}),(0,n.jsxs)(e.p,{children:["Line highlighting and line numbers are now supported out of the box thanks to the new ",(0,n.jsx)(e.a,{href:"https://github.com/timlrx/rehype-prism-plus",children:"rehype-prism-plus plugin"})]}),(0,n.jsx)(e.p,{children:"The following javascript code block:"}),(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"code-highlight",children:[(0,n.jsx)(e.span,{className:"code-line",children:"```js {1, 3-4} showLineNumbers\n"}),(0,n.jsx)(e.span,{className:"code-line",children:`var num1, num2, sum
`}),(0,n.jsx)(e.span,{className:"code-line",children:`num1 = prompt('Enter first number')
`}),(0,n.jsx)(e.span,{className:"code-line",children:`num2 = prompt('Enter second number')
`}),(0,n.jsx)(e.span,{className:"code-line",children:`sum = parseInt(num1) + parseInt(num2) // "+" means "add"
`}),(0,n.jsx)(e.span,{className:"code-line",children:`alert('Sum = ' + sum) // "+" means combine into a string
`}),(0,n.jsx)(e.span,{className:"code-line",children:"```\n"})]})}),(0,n.jsx)(e.p,{children:"will appear as:"}),(0,n.jsx)(e.pre,{className:"language-js",children:(0,n.jsxs)(e.code,{className:"code-highlight language-js",children:[(0,n.jsxs)(e.span,{className:"code-line line-number highlight-line",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"var"})," num1",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," num2",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` sum
`]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:["num1 ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"prompt"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'Enter first number'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),`
`]}),(0,n.jsxs)(e.span,{className:"code-line line-number highlight-line",line:"3",children:["num2 ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"prompt"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'Enter second number'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),`
`]}),(0,n.jsxs)(e.span,{className:"code-line line-number highlight-line",line:"4",children:["sum ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"parseInt"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"num1",(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 function",children:"parseInt"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"num2",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token comment",children:'// "+" means "add"'}),`
`]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[(0,n.jsx)(e.span,{className:"token function",children:"alert"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'Sum = '"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," sum",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token comment",children:'// "+" means combine into a string'}),`
`]})]})}),(0,n.jsxs)(e.p,{children:["To modify the styles, change the following class selectors in the ",(0,n.jsx)(e.code,{children:"prism.css"})," file:"]}),(0,n.jsx)(e.pre,{className:"language-css",children:(0,n.jsxs)(e.code,{className:"code-highlight language-css",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token selector",children:(0,n.jsx)(e.span,{className:"token class",children:".code-highlight"})})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),`
`]}),(0,n.jsxs)(e.span,{className:"code-line",children:["  ",(0,n.jsxs)(e.span,{className:"token atrule",children:[(0,n.jsx)(e.span,{className:"token rule",children:"@apply"})," float-left min-w-full",(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 punctuation",children:"}"}),`
`]}),(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 selector",children:(0,n.jsx)(e.span,{className:"token class",children:".code-line"})})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),`
`]}),(0,n.jsxs)(e.span,{className:"code-line",children:["  ",(0,n.jsxs)(e.span,{className:"token atrule",children:[(0,n.jsx)(e.span,{className:"token rule",children:"@apply"})," -mx-4 block border-l-4 border-opacity-0 pl-4 pr-4",(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 punctuation",children:"}"}),`
`]}),(0,n.jsx)(e.span,{className:"code-line",children:`
`}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token selector",children:[(0,n.jsx)(e.span,{className:"token class",children:".code-line"}),(0,n.jsx)(e.span,{className:"token class",children:".inserted"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),`
`]}),(0,n.jsxs)(e.span,{className:"code-line",children:["  ",(0,n.jsxs)(e.span,{className:"token atrule",children:[(0,n.jsx)(e.span,{className:"token rule",children:"@apply"})," bg-green-500 bg-opacity-20",(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 punctuation",children:"}"}),`
`]}),(0,n.jsx)(e.span,{className:"code-line",children:`
`}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token selector",children:[(0,n.jsx)(e.span,{className:"token class",children:".code-line"}),(0,n.jsx)(e.span,{className:"token class",children:".deleted"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),`
`]}),(0,n.jsxs)(e.span,{className:"code-line",children:["  ",(0,n.jsxs)(e.span,{className:"token atrule",children:[(0,n.jsx)(e.span,{className:"token rule",children:"@apply"})," bg-red-500 bg-opacity-20",(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 punctuation",children:"}"}),`
`]}),(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 selector",children:(0,n.jsx)(e.span,{className:"token class",children:".highlight-line"})})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),`
`]}),(0,n.jsxs)(e.span,{className:"code-line",children:["  ",(0,n.jsxs)(e.span,{className:"token atrule",children:[(0,n.jsx)(e.span,{className:"token rule",children:"@apply"})," -mx-4 border-l-4 border-primary-500 bg-gray-700 bg-opacity-50",(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 punctuation",children:"}"}),`
`]}),(0,n.jsx)(e.span,{className:"code-line",children:`
`}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token selector",children:[(0,n.jsx)(e.span,{className:"token class",children:".line-number"}),(0,n.jsx)(e.span,{className:"token pseudo-element",children:"::before"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),`
`]}),(0,n.jsxs)(e.span,{className:"code-line",children:["  ",(0,n.jsxs)(e.span,{className:"token atrule",children:[(0,n.jsx)(e.span,{className:"token rule",children:"@apply"})," mr-4 -ml-2 inline-block w-4 text-right text-gray-400",(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 property",children:"content"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,n.jsx)(e.span,{className:"token function",children:"attr"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"line",(0,n.jsx)(e.span,{className:"token punctuation",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 punctuation",children:"}"}),`
`]})]})}),(0,n.jsxs)(e.h2,{id:"newletter-component-v113",children:[(0,n.jsx)(e.a,{href:"#newletter-component-v113","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Newletter component (v1.1.3)"]}),(0,n.jsx)(e.p,{children:"Introduced in v1.1.3, the newsletter component gives you an easy way to build an audience. It integrates with the following providers:"}),(0,n.jsxs)(e.ul,{children:[(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://mailchimp.com/",children:"Mailchimp"})}),(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://buttondown.email/",children:"Buttondown"})}),(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://convertkit.com/",children:"Convertkit"})})]}),(0,n.jsxs)(e.p,{children:["To use it, specify the provider which you are using in the config file and add the necessary environment variables to the ",(0,n.jsx)(e.code,{children:".env"})," file. For more information on the required variables, check out ",(0,n.jsx)(e.code,{children:".env.sample."})]}),(0,n.jsxs)(e.p,{children:["Two components are exported, a default ",(0,n.jsx)(e.code,{children:"NewsletterForm"})," and a ",(0,n.jsx)(e.code,{children:"BlogNewsletterForm"})," component, which is also passed in as an MDX component and can be used in a blog post:"]}),(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsx)(e.code,{className:"code-highlight language-jsx",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:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"BlogNewsletterForm"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"title"}),(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:'"'}),"Like what you are reading?",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),`
`]})})}),(0,n.jsx)(c,{title:"Like what you are reading?"}),(0,n.jsxs)(e.p,{children:["The component relies on nextjs's ",(0,n.jsx)(e.a,{href:"https://nextjs.org/docs/api-routes/introduction",children:"API routes"})," which requires a server-side instance of nextjs to be setup and is not compatible with a 100% static site export. Users should either self-host or use a compatible platform like Vercel or Netlify which supports this functionality."]}),(0,n.jsx)(e.p,{children:"A static site compatible alternative is to substitute the route in the newsletter component with a form API endpoint provider."}),(0,n.jsxs)(e.h2,{id:"bibliography-and-citations-v121",children:[(0,n.jsx)(e.a,{href:"#bibliography-and-citations-v121","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Bibliography and Citations (v1.2.1)"]}),(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:"rehype-citation"})," plugin is added to the xdm processing pipeline in v1.2.1. This allows you to easily format citations and insert bibliography from an existing bibtex or CSL-json file."]}),(0,n.jsx)(e.p,{children:"For example, the following markdown code sample:"}),(0,n.jsx)(e.pre,{className:"language-md",children:(0,n.jsxs)(e.code,{className:"code-highlight language-md",children:[(0,n.jsx)(e.span,{className:"code-line",children:`Standard citation [@Nash1950]
`}),(0,n.jsx)(e.span,{className:"code-line",children:`In-text citations e.g. @Nash1951
`}),(0,n.jsx)(e.span,{className:"code-line",children:`Multiple citations [see @Nash1950; @Nash1951, page 50]
`}),(0,n.jsx)(e.span,{className:"code-line",children:`
`}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token bold",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"**"}),(0,n.jsx)(e.span,{className:"token content",children:"References:"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"**"})]}),`
`]}),(0,n.jsx)(e.span,{className:"code-line",children:`
`}),(0,n.jsx)(e.span,{className:"code-line",children:`[^ref]
`})]})}),(0,n.jsx)(e.p,{children:"is rendered to the following:"}),(0,n.jsxs)(e.p,{children:["Standard citation ",(0,n.jsx)(e.span,{id:"citation--nash1950--1",children:"(Nash, 1950)"}),(0,n.jsx)(e.br,{}),"In-text citations e.g. ",(0,n.jsx)(e.span,{id:"citation--nash1951--2",children:"Nash (1951)"}),(0,n.jsx)(e.br,{}),"Multiple citations ",(0,n.jsx)(e.span,{id:"citation--nash1950--nash1951--3",children:"(see Nash, 1950, 1951, p. 50)"})]}),(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"References:"})}),(0,n.jsxs)(e.div,{className:"csl-bib-body references",id:"refs",children:[(0,n.jsxs)(e.div,{className:"csl-entry",id:"bib-nash1950",children:["Nash, J. (1950). Equilibrium points in n-person games. ",(0,n.jsx)(e.i,{children:"Proceedings of the National Academy of Sciences"}),", ",(0,n.jsx)(e.i,{children:"36"}),"(1), 48\u201349."]}),(0,n.jsxs)(e.div,{className:"csl-entry",id:"bib-nash1951",children:["Nash, J. (1951). Non-cooperative games. ",(0,n.jsx)(e.i,{children:"Annals of Mathematics"}),", 286\u2013295."]})]}),(0,n.jsxs)(e.p,{children:["A bibliography will be inserted at the end of the document, but this can be overwritten by specifying a ",(0,n.jsx)(e.code,{children:"[^Ref]"})," tag at the intended location. The plugin uses APA citation formation, but also supports the following CSLs, 'apa', 'vancouver', 'harvard1', 'chicago', 'mla', or a path to a user-specified CSL file."]}),(0,n.jsxs)(e.p,{children:["See ",(0,n.jsx)(e.a,{href:"https://github.com/timlrx/rehype-citation",children:"rehype-citation readme"})," for more information on the configuration options."]}),(0,n.jsxs)(e.h2,{id:"self-hosted-font-v150",children:[(0,n.jsx)(e.a,{href:"#self-hosted-font-v150","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Self-hosted font (v1.5.0)"]}),(0,n.jsxs)(e.p,{children:["Google font has been replaced with self-hosted font from ",(0,n.jsx)(e.a,{href:"https://fontsource.org/",children:"Fontsource"}),". This gives the following ",(0,n.jsx)(e.a,{href:"https://fontsource.org/docs/introduction",children:"advantages"}),":"]}),(0,n.jsxs)(e.blockquote,{children:[(0,n.jsx)(e.p,{children:"Self-hosting brings significant performance gains as loading fonts from hosted services, such as Google Fonts, lead to an extra (render blocking) network request. To provide perspective, for simple websites it has been seen to double visual load times."}),(0,n.jsx)(e.p,{children:"Fonts remain version locked. Google often pushes updates to their fonts without notice, which may interfere with your live production projects. Manage your fonts like any other NPM dependency."}),(0,n.jsx)(e.p,{children:"Commit to privacy. Google does track the usage of their fonts and for those who are extremely privacy concerned, self-hosting is an alternative."})]}),(0,n.jsxs)(e.p,{children:["This leads to a smaller font bundle and a 0.1s faster load time (",(0,n.jsx)(e.a,{href:"https://www.webpagetest.org/video/compare.php?tests=220201_AiDcFH_f68a69b758454dd52d8e67493fdef7da,220201_BiDcMC_bf2d53f14483814ba61e794311dfa771",children:"webpagetest comparison"}),")."]}),(0,n.jsx)(e.p,{children:"To change the default Inter font:"}),(0,n.jsxs)(e.ol,{children:[(0,n.jsxs)(e.li,{children:["Install the preferred ",(0,n.jsx)(e.a,{href:"https://fontsource.org/fonts",children:"font"})," - ",(0,n.jsx)(e.code,{children:"npm install -save @fontsource/"})]}),(0,n.jsxs)(e.li,{children:["Update the import at ",(0,n.jsx)(e.code,{children:"pages/_app.js"}),"- ",(0,n.jsx)(e.code,{children:"import '@fontsource/.css'"})]}),(0,n.jsxs)(e.li,{children:["Update the ",(0,n.jsx)(e.code,{children:"fontfamily"})," property in the tailwind css config file"]})]}),(0,n.jsxs)(e.h2,{id:"upgrade-guide",children:[(0,n.jsx)(e.a,{href:"#upgrade-guide","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Upgrade guide"]}),(0,n.jsx)(e.p,{children:"There are significant portions of the code that has been changed from v0 to v1 including support for layouts and a new mdx engine."}),(0,n.jsx)(e.p,{children:"There's also no real reason to change if the previous one serves your needs and it might be easier to copy the component changes you are interested in to your existing blog rather than migrating everything over."}),(0,n.jsx)(e.p,{children:"Nonetheless, if you want to do so and have not changed much of the template, you could clone the new version and copy over the blog post over to the new template."}),(0,n.jsx)(e.p,{children:"Another alternative would be to pull the latest template version with the following code:"}),(0,n.jsx)(e.pre,{className:"language-bash",children:(0,n.jsxs)(e.code,{className:"code-highlight language-bash",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"git"})," remote ",(0,n.jsx)(e.span,{className:"token function",children:"add"}),` template git@github.com:timlrx/tailwind-nextjs-starter-blog.git
`]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"git"}),` pull template v1 --allow-unrelated-histories
`]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"rm"})," ",(0,n.jsx)(e.span,{className:"token parameter variable",children:"-rf"}),` node_modules
`]})]})}),(0,n.jsxs)(e.p,{children:["You can see an example of such a migration in this ",(0,n.jsx)(e.a,{href:"https://github.com/timlrx/timlrx.com/commit/bba1c185384fd6d5cdaac15abf802fdcff027286",children:"commit"})," for my personal blog."]}),(0,n.jsxs)(e.p,{children:["v1 also uses ",(0,n.jsx)(e.code,{children:"feed.xml"})," rather than ",(0,n.jsx)(e.code,{children:"index.xml"}),", to avoid some build issues with Vercel. If you are migrating you should add a redirect to ",(0,n.jsx)(e.code,{children:"next.config.js"})," like so:"]}),(0,n.jsx)(e.pre,{className:"language-js",children:(0,n.jsxs)(e.code,{className:"code-highlight language-js",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"async"})," ",(0,n.jsx)(e.span,{className:"token function",children:"redirects"}),(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 punctuation",children:"{"}),`
`]}),(0,n.jsxs)(e.span,{className:"code-line",children:["  ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(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 punctuation",children:"{"}),`
`]}),(0,n.jsxs)(e.span,{className:"code-line",children:["      ",(0,n.jsx)(e.span,{className:"token property literal-property",children:"source"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'/:path/index.xml'"}),(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 property literal-property",children:"destination"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'/:path/feed.xml'"}),(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 property literal-property",children:"permanent"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"}),(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 punctuation",children:"}"}),`
`]}),(0,n.jsxs)(e.span,{className:"code-line",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 punctuation",children:"}"}),`
`]})]})}),(0,n.jsxs)(e.section,{className:"footnotes","data-footnotes":!0,children:[(0,n.jsxs)(e.h2,{id:"footnote-label",className:"sr-only",children:[(0,n.jsx)(e.a,{href:"#footnote-label","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Footnotes"]}),(0,n.jsx)(e.ol,{children:(0,n.jsx)(e.li,{id:"user-content-fn-1",children:(0,n.jsxs)(e.p,{children:["With the new changes in Nextjs 12, first load JS increase to 45kB. ",(0,n.jsx)(e.a,{href:"#user-content-fnref-1","aria-label":"Back to content",className:"data-footnote-backref","data-footnote-backref":!0,children:"\u21A9"})]})})})]})]})}function x(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(d,a)})):d(a)}var v=x;function p(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(j);})();
;return Component;
Under Construction 🚧
