Initial

frontend-next/src/app/app/page.js

@@ -5,6 +5,7 @@ import { auth, database } from "../../../firebase-config";
 import { ref, onValue } from "firebase/database";
 import { useAuthState } from "react-firebase-hooks/auth"
 import { useGeolocated } from "react-geolocated";
+import Link from "next/link"
 
 // Header Import
 import { Header } from "../../components/app/header";

frontend-next/src/app/login/page.js

@@ -46,9 +46,9 @@ function Login() {
     <div>
       <div className="grid h-screen place-items-center">
         <div>
-          <a href="/">
+          <Link href="/">
             <img src="logos/logo_transparent_inverse.png" />
-          </a>
+          </Link>
           <span className="text-[36px]">Chat with friends!</span>
           <div>
             <h3 className="text-[24px] mt-[25px] mb-2">Login</h3>
@@ -109,7 +109,7 @@ function Login() {
                 Log In
               </button>
               <br />
-              Need an account? <a href="/register">Sign Up</a>
+              Need an account? <Link href="/register">Sign Up</Link>
               <br />
             </Form>
           </div>

frontend-next/src/app/page.js

@@ -1,6 +1,6 @@
 "use client";
 import { useState, useEffect } from "react";
-
+import Link from "next/link"
 import { auth, database } from "../../firebase-config";
 import { ref, get } from "firebase/database";
 import { onAuthStateChanged } from "firebase/auth";
@@ -53,24 +53,24 @@ function Home() {
           <div className="m-5">
             {!isAuthenticated && (
               <div>
-                <a href="/login">
+                <Link href="/login">
                   <button className="bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
                     Login
                   </button>
-                </a>
-                <a href="/register">
+                </Link>
+                <Link href="/register">
                   <button className="bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
-                    Sign Up
+                    Register
                   </button>
-                </a>
+                </Link>
               </div>
             )}
             {isAuthenticated && (
-              <a href="/app">
-                <button className="bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
-                  Continue to App
-                </button>
-              </a>
+              <Link href="/app">
+              <button className="bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
+                Continue to App
+              </button>
+            </Link>
             )}
             {!isLoadingLoc && roomCount == 1 && (
               <div className="text-[24px] pt-10">

frontend-next/src/app/register/page.js

@@ -61,9 +61,9 @@ function Register() {
     <div>
       <div className="grid h-screen place-items-center">
         <div>
-          <a href="/">
+          <Link href="/">
             <img src="logos/logo_transparent_inverse.png" />
-          </a>
+          </Link>
           <span className="text-[36px]">Chat with friends!</span>
           <div>
             <h3 className="text-[24px] mt-[15px]">Register</h3>
@@ -110,7 +110,7 @@ function Register() {
                 Register
               </button>
               <br />
-              Have an account? <a href="/login">Log In</a>
+              Have an account? <Link href="/login">Login</Link>
             </Form>
           </div>
         </div>

frontend-next/src/components/app/datatypes.js

@@ -1,3 +1,5 @@
+import Link from "next/link"
+
 // Colors for Messages
 const userColors = [
   "#ff80ed",
@@ -40,13 +42,11 @@ export function Chat({ chatObj }) {
     <div className="width-[100%] bg-white rounded-lg mt-1 text-left p-1 grid grid-cols-2 mr-2">
       <div>
         <span style={{ color: userColors[generateColor(chatObj.user)] }}>
-          <a
-            href={chatObj.uid && "/user/" + chatObj.uid}
-            className="hover:font-bold cursor-pointer"
-            target="_blank"
-          >
+          <Link href={chatObj.uid && "/user/" + chatObj.uid}
+          className="hover:font-bold cursor-pointer"
+          target="_blank">
             {chatObj.user}
-          </a>
+          </Link>
         </span>
         : {chatObj.body}
       </div>
@@ -73,13 +73,11 @@ export function SystemMessage({ chatObj }) {
     <div className="width-[100%] bg-white rounded-lg mt-1 text-left p-1 grid grid-cols-2 mr-2">
       <div className="text-[#d1d1d1]">
         <span style={{ color: userColors[generateColor(chatObj.user)] }}>
-          <a
-            href={chatObj.uid && "/user/" + chatObj.uid}
-            className="hover:font-bold cursor-pointer"
-            target="_blank"
-          >
+          <Link href={chatObj.uid && "/user/" + chatObj.uid}
+          className="hover:font-bold cursor-pointer"
+          target="_blank">
             {chatObj.user}
-          </a>
+          </Link>
         </span>{" "}
         has {chatObj.body} the room.
       </div>
@@ -93,25 +91,24 @@ export function SystemMessage({ chatObj }) {
 // Member for Active/Room members in sidebar
 export function Member({ memberObj }) {
   return (
-    <a href={"/user/" + memberObj.uid} target="_blank">
+    <Link href={"/user/" + memberObj.uid} target="_blank">
       <div className="cursor-pointer g-[aliceblue] rounded-lg m-3 shadow-xl p-2">
         {memberObj.username}
       </div>
-    </a>
+    </Link>
   );
 }
 
 // Chat Room Object for myRooms and Nearby in sidebar
 export function ChatRoomSidebar({ roomObj }) {
   return (
-    <div
-      onClick={() => location.href = "/chat?room=" + roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp}
-      className="border-[black] border-1 shadow-lg p-2 m-2 rounded-lg cursor-pointer"
-    >
-      <div className="col-span-2">
-        <div className="font-bold">{roomObj.name}</div>
-        <div className="italic">{roomObj.description}</div>
-      </div>
+    <div className="border-[black] border-1 shadow-lg p-2 m-2 rounded-lg cursor-pointer">
+      <Link href={"/chat?room=" + roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp} prefetch={false}>
+        <div className="col-span-2">
+          <div className="font-bold">{roomObj.name}</div>
+          <div className="italic">{roomObj.description}</div>
+        </div>
+      </Link>
     </div>
   );
 }

frontend-next/src/components/app/header.js

@@ -2,6 +2,7 @@ import { auth, database } from "../../../firebase-config";
 import { ref, set, remove } from "firebase/database";
 import { signOut } from "firebase/auth";
 import { Popover } from "@headlessui/react";
+import Link from "next/link"
 
 
 function logout() {
@@ -83,9 +84,9 @@ export function Header({
   return (
     <div className="flex m-2 rounded-lg h-[63px] bg-white shadow-2xl p-1">
       <div className="flex shrink h-[60px]">
-        <a href="/app">
+        <Link href="/app">
           <img src="/logos/logo_transparent_inverse.png" className="h-[60px]" />
-        </a>
+        </Link>
       </div>
       <div className="grow grid grid-rows-1 grid-flow-col auto-cols-max justify-end gap-2 h-[60px] p-2">
         {mainTab == "chat" && isMyRoom == false && (
@@ -137,19 +138,19 @@ export function Header({
 
           <Popover.Panel className="absolute z-10 bg-white mt-[4px] rounded-xl ml-3 shadow-2xl">
             <div className="grid grid-cols-1">
-              <a
+              <Link
                 className="rounded-xl p-4 hover:bg-[#C0C0C0]"
                 href={"/user/" + user.uid}
               >
                 View Profile
-              </a>
-              <a
+              </Link>
+              <Link
                 className="rounded-xl p-4 hover:bg-[#C0C0C0]"
                 onClick={logout}
                 href="/"
               >
                 Sign Out
-              </a>
+              </Link>
             </div>
 
             <img src="/solutions.jpg" alt="" />

frontend-next/src/components/app/profile/ProfileRoom.js

@@ -1,4 +1,5 @@
 import { Geo } from "../map/geo";
+import Link from "next/link"
 import { dateOptions } from "../datatypes";
 
 // Display of Rooms on user profile
@@ -18,14 +19,14 @@ export function ProfileRoom({ room }) {
         <div>
           Created on {new Date(room.timestamp).toLocaleString(dateOptions)}
         </div>
-        <a
+        <Link
           href={
             "/chat?room=" + room.path + "/" + room.name + "-" + room.timestamp
           }
           className="absolute z-2 top-[190px] w-[108px] p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full flex items-center"
         >
           Open Room
-        </a>
+        </Link>
       </div>
     </div>
   );