perf: avoid layout re-rendering

components/custom/background/background.tsx

@@ -1,9 +0,0 @@
-import { Tiles } from './tile/tiles';
-
-type BackgroundProps = {
-  children: React.ReactNode;
-};
-
-export function Background({ children }: BackgroundProps) {
-  return <Tiles>{children}</Tiles>;
-}

components/custom/customLink.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { Button } from '../ui/button';
 
 type LinkProps = {
@@ -5,10 +6,10 @@ type LinkProps = {
   text: string;
 };
 
-export function Link({ path, text }: LinkProps) {
+export function CustomLink({ path, text }: LinkProps) {
   return (
     <Button asChild>
-      <a href={path}>{text}</a>
+      <Link href={path}>{text}</Link>
     </Button>
   );
 }

components/custom/footer.tsx

@@ -1,5 +1,6 @@
+import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { Link } from './link';
+import { CustomLink } from './customLink';
 
 const links = [{ name: 'Subscribe', path: '/' }];
 
@@ -11,12 +12,12 @@ function Footer() {
       {pathname === '/' ? (
         <p className='text-center text-xs text-gray-600'>
           By subscribing, you agree to our{' '}
-          <a
+          <Link
             className='font-medium text-indigo-600 hover:text-indigo-500'
             href='/privacy'
           >
             Privacy Policy
-          </a>
+          </Link>
           .
         </p>
       ) : (
@@ -25,11 +26,11 @@ function Footer() {
             link =>
               pathname !== link.path &&
               !(pathname === '/confirmation' && link.path === '/') && (
-                <Link key={link.path} path={link.path} text={link.name} />
+                <CustomLink key={link.path} path={link.path} text={link.name} />
               )
           )}
           {pathname === '/privacy' && (
-            <Link path='/unsubscribe' text='Unsubscribe' />
+            <CustomLink path='/unsubscribe' text='Unsubscribe' />
           )}
         </ul>
       )}

components/custom/tiles/tiles.tsx

@@ -3,8 +3,8 @@
 import { usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { z } from 'zod';
-import { NewsTile, NewsTileSchema } from '../../../../utils/schemas';
-import { Tile } from './tile';
+import { NewsTile, NewsTileSchema } from '../../../utils/schemas';
+import { Tile } from './components/tile';
 
 type TilesProps = {
   children: React.ReactNode;

components/emails/confirmation.tsx

@@ -1,4 +1,4 @@
-import { Link } from '../custom/link';
+import { CustomLink } from '../custom/customLink';
 import { Note } from './components/note';
 import Template from './template';
 
@@ -22,7 +22,7 @@ export default function ConfirmationTemplate(code: string) {
                 justifyContent: 'center'
               }}
             >
-              <Link
+              <CustomLink
                 path={`${process.env.HOME_URL}/confirmation?code=${code}`}
                 text='Confirm subscription'
               />

components/emails/helpers/newsletterSayings.ts

@@ -1,13 +0,0 @@
-export const sayings = [
-    'hot off the press',
-    'straight from the oven',
-    "straight from the horse's mouth",
-    'brand spanking new',
-    'fresh as a daisy',
-    'straight out of the box',
-    'straight off the assembly line',
-    'hot out of the kitchen',
-    'just minted',
-    'freshly brewed',
-    'just off the production line'
-  ];

components/emails/helpers/sayings.ts

@@ -0,0 +1,13 @@
+export const sayings = [
+  'hot off the press',
+  'straight from the oven',
+  "straight from the horse's mouth",
+  'brand spanking new',
+  'fresh as a daisy',
+  'straight out of the box',
+  'straight off the assembly line',
+  'hot out of the kitchen',
+  'just minted',
+  'freshly brewed',
+  'just off the production line'
+];

components/emails/newsletter.tsx

@@ -1,12 +1,11 @@
 import { z } from 'zod';
 import { NewsSchema } from '../../utils/schemas';
-import { sayings } from './helpers/newsletterSayings';
+import { sayings } from './helpers/sayings';
 import Template from './template';
 
 export default function NewsletterTemplate(
   stories: z.infer<typeof NewsSchema>[]
 ) {
-
   return {
     subject: `What's new from the Hackernews forum?`,
     template: (

components/emails/unsubscribe.tsx

@@ -1,4 +1,4 @@
-import { Link } from '../custom/link';
+import { CustomLink } from '../custom/customLink';
 import { Note } from './components/note';
 import Template from './template';
 
@@ -22,7 +22,7 @@ export default function UnsubscribeTemplate() {
                 justifyContent: 'center'
               }}
             >
-              <Link path='/' text='Re-subscribe' />
+              <CustomLink path='/' text='Re-subscribe' />
             </div>
             <Note>
               If you have any questions or concerns, please feel free to{' '}