propper page linking in Next js using Link to utilize base path in next config

Author: JacobACan

codecrusaders/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next"
 import { Geist, Geist_Mono } from "next/font/google"
 import "./globals.css"
+import Link from "next/link"
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -32,22 +33,25 @@ export default function RootLayout({
           <nav>
             <ul>
               <li>
-                <a href="/">Home</a>
+                <Link href="/">Home</Link>
               </li>
               <li>
-                <a href="/about">About</a>
+                <Link href="/about">About</Link>
               </li>
               <li>
-                <a href="/team">Team</a>
+                <Link href="/team">Team</Link>
               </li>
               <li>
-                <a href="/reports_and_metrics">Metrics and Reports</a>
+                <Link href="/reports_and_metrics">Metrics and Reports</Link>
               </li>
               <li>
-                <a href="/process">Process and Plan</a>
+                <Link href="/process">Process and Plan</Link>
               </li>
               <li>
-                <a href="https://github.com/JacRIT/Team3.github.io/wiki">
+                <a
+                  target="_blank"
+                  href="https://github.com/JacRIT/Team3.github.io/wiki"
+                >
                   Wiki/Documentation
                 </a>
               </li>