feat: add next link component (#21)

src/app/page.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 
-import NextLink from 'next/link';
-
 import { unstable_noStore as noStore } from 'next/cache';
 
+import { Link } from '@/components/link';
+
+import { cn } from '@/utils/cn';
 import { api } from '@/trpc/server';
 import { getServerAuthSession } from '@/server/auth';
-import { cn } from '@/utils/cn';
 
 export default async function Page() {
     noStore();
@@ -31,7 +31,7 @@ export default async function Page() {
                 ) : null}
 
                 <div className="mt-8">
-                    <NextLink
+                    <Link
                         href={session ? '/api/auth/signout' : '/api/auth/signin'}
                         className={cn([
                             'inline-flex items-center rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm font-semibold text-zinc-700 duration-200 ease-in-out',
@@ -40,7 +40,7 @@ export default async function Page() {
                         ])}
                     >
                         {session ? 'Sign out' : 'Sign in'}
-                    </NextLink>
+                    </Link>
                 </div>
             </div>
         </main>

src/components/link.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import NextLink, { type LinkProps } from 'next/link';
+
+export type TLinkProps = {
+    openNewTab?: boolean;
+} & React.ComponentPropsWithRef<'a'> &
+    LinkProps;
+
+export const Link = React.forwardRef<HTMLAnchorElement, TLinkProps>(function _Link({ href, openNewTab = false, children, ...props }, ref) {
+    const isNewTab = openNewTab ? openNewTab : !href.startsWith('/') && !href.startsWith('#') && !href.startsWith('?');
+
+    if (!isNewTab) {
+        return (
+            <NextLink {...{ href, ref }} {...props}>
+                {children}
+            </NextLink>
+        );
+    }
+
+    return (
+        <a {...{ href, ref }} {...props} target="_blank" rel="noopener noreferrer">
+            {children}
+        </a>
+    );
+});