ran npx @next/coddemod new-link . and fixed the legacy behavior in StandardNav to fix settings page link bug

src/components/AuthPopup.jsx

@@ -11,7 +11,7 @@ export function AuthPopup() {
     // User logged out
     return (
       <div className="hidden rounded-md bg-[#3B82F6] hover:bg-[#468dff]">
-        <Link href="/login">
+        <Link href="/login" legacyBehavior>
           <div className="mx-auto my-auto flex h-10 text-center">
             <h1 className="mx-auto my-auto text-lg font-semibold text-white">
               Log in to see your progress!

src/components/Button.jsx

@@ -38,7 +38,7 @@ export function Button({
   );
 
   return href ? (
-    <Link href={href} className={className} {...props} />
+    <Link href={href} className={className} {...props} legacyBehavior />
   ) : (
     <button className={className} {...props} />
   );

src/components/Header.jsx

@@ -91,7 +91,7 @@ export function Header() {
       <Container>
         <nav className="relative z-50 flex justify-between">
           <div className="flex items-center md:gap-x-12">
-            <Link href="../" aria-label="Home">
+            <Link href="../" aria-label="Home" legacyBehavior>
               <Logo className="h-10 w-auto" /> 
             </Link>
 

src/components/StandardNav.jsx

@@ -288,7 +288,6 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
           <br></br>
         </div>
       )}
-
       <Disclosure as="nav" className=" border-b border-neutral-800 shadow">
         {({ open }) => (
           <>
@@ -313,21 +312,22 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                     </Disclosure.Button>
                   </div>
                   <div className="flex flex-shrink-0 items-center">
-                    <Link href="/dashboard" aria-label="Dashboard">
+                    <Link href="/dashboard" aria-label="Dashboard" legacyBehavior>
                       <Logo />
                     </Link>
                   </div>
                   <div className=" vertical-align md:ml-6 md:flex  ">
                   <Link
-                      href="/learn/modules"
-                      className={
-                        linkClass('/learn/modules') + ' hidden lg:inline-flex'
-                      }
-                    >
+                    href="/learn/modules"
+                    className={
+                      linkClass('/learn/modules') + ' hidden lg:inline-flex'
+                    }
+                  >
+                    <div className="flex items-center">
                       Learn
-
                       <span className="bg-blue-600 text-xs  ml-2 text-white px-2 rounded-full">New!</span>
-                    </Link>
+                    </div>
+                  </Link>
                     <Link
                       href="/practice"
                       className={
@@ -389,7 +389,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                                   <Link
                                     href="/create"
                                     className="flex items-center space-x-3 rounded-lg px-4 py-3 text-base text-gray-300 transition-all hover:bg-neutral-800 hover:text-white"
-                                  >
+                                    legacyBehavior>
                                     <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-neutral-800 text-white">
                                       <PencilSquareIcon className="h-5 w-5" />
                                     </div>
@@ -402,7 +402,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                                   <Link
                                     href="/groups"
                                     className="mt-2 flex items-center space-x-3 rounded-lg px-4 py-3 text-base text-gray-300 transition-all hover:bg-neutral-800 hover:text-white"
-                                  >
+                                    legacyBehavior>
                                     <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-neutral-800 text-white">
                                       <UserGroupIcon className="h-5 w-5" />
                                     </div>
@@ -587,7 +587,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                                 className={classNames(
                                   'flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                                 )}
-                              >
+                                legacyBehavior>
                                 <UserCircleIcon
                                   className="mr-4 block h-6 w-6"
                                   aria-hidden="true"
@@ -601,7 +601,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                                 className={classNames(
                                   'flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                                 )}
-                              >
+                                legacyBehavior>
                                 <Cog6ToothIcon
                                   className="mr-4 block h-6 w-6"
                                   aria-hidden="true"
@@ -626,7 +626,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                               className={classNames(
                                 'hidden flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                               )}
-                            >
+                              legacyBehavior>
                               <ShieldExclamationIcon
                                 className="mr-4 block h-6 w-6"
                                 aria-hidden="true"
@@ -639,7 +639,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                               className={classNames(
                                 ' flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                               )}
-                            >
+                              legacyBehavior>
                               <ShieldExclamationIcon
                                 className="mr-4 block h-6 w-6"
                                 aria-hidden="true"
@@ -653,7 +653,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                                 className={classNames(
                                   'flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                                 )}
-                              >
+                                legacyBehavior>
                                 <ShieldCheckIcon
                                   className="mr-4 block h-6 w-6"
                                   aria-hidden="true"
@@ -781,20 +781,16 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
           </>
         )}
       </Disclosure>
-
       <SearchModal
         showSearchModal={showSearchModal}
         setShowSearchModal={setShowSearchModal}
       />
       <Upgrade open={upgradeModalOpen} setOpen={setUpgradeModalOpen} />
-
-        <div className="mx-auto  hidden w-full bg-yellow-800 py-1 text-center  text-sm text-white ">
-          <h1 className="mx-auto  px-4 text-left">
-              Our server hosting provider is experiencing issues which may result in CTFGuide not working as expected. Join our <a className="font-bold" href="https://discord.gg/BwbCYHVX">Discord</a> for updates.
-          </h1>
-        </div>
-
-
+      <div className="mx-auto  hidden w-full bg-yellow-800 py-1 text-center  text-sm text-white ">
+        <h1 className="mx-auto  px-4 text-left">
+            Our server hosting provider is experiencing issues which may result in CTFGuide not working as expected. Join our <a className="font-bold" href="https://discord.gg/BwbCYHVX">Discord</a> for updates.
+        </h1>
+      </div>
       <SpawnTerminal open={terminaIsOpen} setOpen={setTerminalIsOpen} />
       <NotificationsModal
         open={showAllNotifications}

src/components/challenge/ChallengeComponent.jsx

@@ -37,7 +37,7 @@ const Challenge = ({ data, inCarousel }) => {
         classStyle +
         'duration-4000 min-h-[190px] min-w-[200px] transition ease-in-out hover:bg-neutral-800/40'
       }
-    >
+      legacyBehavior>
       <div className="relative h-full">
         <div className="flex">
           <span

src/components/dashboard/DashboardHeader.jsx

@@ -97,7 +97,7 @@ export function DashboardHeader() {
       <div className="mx-auto max-w-7xl">
         <div className="-mt-12  sm:-mt-16 sm:flex sm:items-end sm:space-x-5">
           <div className="flex justify-center sm:justify-start">
-            <Link href={`${baseUrl}/users/${username}`}>
+            <Link href={`${baseUrl}/users/${username}`} legacyBehavior>
               {(pfp && (
                 <img
                   className="h-32 w-32    rounded-full hover:bg-[#212121] sm:h-32 sm:w-32"

src/components/dashboard/FriendCard.jsx

@@ -7,27 +7,26 @@ export function FriendCard({ username, bio, badges, followers, following }) {
   };
 
   return (
-
-      <div
-        className="py-4 mt-5 text-white text-center border border-neutral-500"
-      >
-        <Link href={`/users/${username}`}>
-          <img
-            style={{ borderColor: '#212121' }}
-            className="mx-auto h-22 w-22 rounded-full border bg-neutral-900 hover:bg-[#212121]"
-            src={`https://robohash.org/${username}.png?set=set1&size=150x150`}
-            alt=""
-          />
-        </Link>
-        <h1 className="mt-4 text-xl font-bold text-blue-500">{username}</h1>
-        <h2>Followers: {followers}</h2>
-        <h2>Following: {following}</h2>
-        {bio &&
-          <hr className='mt-4 border-gray-500 w-4/5 mx-auto'></hr>
-        }
-        <p className="mt-4 text-lg px-2 leading-relaxed text-gray-300">
-
-        </p>
-      </div>
+    <div
+      className="py-4 mt-5 text-white text-center border border-neutral-500"
+    >
+      <Link href={`/users/${username}`} legacyBehavior>
+        <img
+          style={{ borderColor: '#212121' }}
+          className="mx-auto h-22 w-22 rounded-full border bg-neutral-900 hover:bg-[#212121]"
+          src={`https://robohash.org/${username}.png?set=set1&size=150x150`}
+          alt=""
+        />
+      </Link>
+      <h1 className="mt-4 text-xl font-bold text-blue-500">{username}</h1>
+      <h2>Followers: {followers}</h2>
+      <h2>Following: {following}</h2>
+      {bio &&
+        <hr className='mt-4 border-gray-500 w-4/5 mx-auto'></hr>
+      }
+      <p className="mt-4 text-lg px-2 leading-relaxed text-gray-300">
+
+      </p>
+    </div>
   );
 };

src/components/dashboard/FriendRequestCard.jsx

@@ -4,7 +4,7 @@ export function FriendRequestCard({ username, followers, following, onAccept, on
     return (
         <div className='mx-auto mt-6 border border-neutral-500 w-5/6'>
             <div className="py-8 text-neutral-500 text-center flex items-center w-full text-white">
-                <Link href={`/users/${username}`}>
+                <Link href={`/users/${username}`} legacyBehavior>
                     <img
                         style={{ borderColor: '#212121', height: "100px", width: "100px" }}
                         className="mx-5 h-15 w-15 rounded-full border bg-black hover:bg-[#212121]"

src/components/dashboard/Suggest.jsx

@@ -9,10 +9,9 @@ export function Suggest() {
         {' '}
         RECOMMENDATIONS
       </h1>
-
       <div className="mb-5 grid grid-cols-2 gap-x-4">
         <div className="">
-          <Link href='/challenges/cypher_decoding'>
+          <Link href='/challenges/cypher_decoding' legacyBehavior>
             <div className="  relative isolate overflow-hidden  rounded-md bg-black/10 bg-neutral-900 pb-4   ">
               <div className="relative mx-auto max-w-7xl  px-5">
                 <div className="mx-auto lg:mx-0 lg:max-w-3xl">

src/components/groups/studentView.jsx

@@ -42,7 +42,6 @@ export default function StudentView({ group }) {
       </Head>
       <StandardNav />
       <StudentNav classCode={classroom.classCode} />
-
       <div className="min-h-screen bg-neutral-900/30 pb-12">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-8">
           {/* Header Section */}
@@ -90,7 +89,7 @@ export default function StudentView({ group }) {
                   <Link
                     href={`/groups/${classroom.classCode}/view-all-assignments`}
                     className="text-sm text-blue-400 hover:text-blue-300 transition-colors flex items-center"
-                  >
+                    legacyBehavior>
                     View All <i className="fas fa-arrow-right ml-2"></i>
                   </Link>
                 </div>
@@ -165,7 +164,6 @@ export default function StudentView({ group }) {
           </div>
         </div>
       </div>
-
       <ToastContainer
         position="bottom-right"
         autoClose={5000}

src/components/home/Hero.jsx

@@ -46,7 +46,7 @@ export function Hero() {
 
           <nav className="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
             <div className="flex lg:flex-1">
-            <Link href="../" aria-label="Home">
+            <Link href="../" aria-label="Home" legacyBehavior>
               <Logo className="h-10 w-auto" />
             </Link>
 
@@ -70,7 +70,10 @@ export function Hero() {
                       <Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-md -translate-x-1/2 transform px-2 sm:px-0">
                         <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
                           <div className="relative grid gap-6 bg-neutral-900 bg-blend-overlay px-5 py-6 sm:gap-8 sm:p-8">
-                            <Link href="/education" className="block p-3 -m-3 transition duration-150 ease-in-out rounded-md hover:bg-neutral-800">
+                            <Link
+                              href="/education"
+                              className="block p-3 -m-3 transition duration-150 ease-in-out rounded-md hover:bg-neutral-800"
+                              legacyBehavior>
                               <div className="flex items-start">
                                 <AcademicCapIcon className="h-8 w-8 text-blue-500 mr-3 mt-1" />
                                 <div>
@@ -135,7 +138,7 @@ export function Hero() {
             <div className="fixed inset-0 z-50" />
             <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-gray-900 px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-white/10">
               <div className="flex items-center justify-between">
-              <Link href="../" aria-label="Home">
+              <Link href="../" aria-label="Home" legacyBehavior>
               <Logo className="h-10 w-auto" />
             </Link>
                 <button
@@ -173,7 +176,6 @@ export function Hero() {
             </Dialog.Panel>
           </Dialog>
         </header>
-
         <div className="relative isolate pt-14">
           <div
             className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
@@ -279,5 +281,5 @@ export function Hero() {
           </div>
         </div>
       </div>
-  );
+    );
 }

src/components/practice/community.jsx

@@ -375,12 +375,10 @@ export function Community({ challenges }) {
             </>
           ) : (
             // kinda hacky but it works
-            challenges.length != 0 && (
-              <div className="bg-neutral-800/50 p-4 py-10 rounded-md w-full col-span-4 text-center">
-                <FontAwesomeIcon icon={faFolderOpen} className="w-10 h-10 mx-auto mb-4 text-neutral-400" />
-                <p className="text-white">No challenges found with the current filters. Try changing the filters or search for a different challenge.</p>
-              </div>
-            )
+            (challenges.length != 0 && (<div className="bg-neutral-800/50 p-4 py-10 rounded-md w-full col-span-4 text-center">
+              <FontAwesomeIcon icon={faFolderOpen} className="w-10 h-10 mx-auto mb-4 text-neutral-400" />
+              <p className="text-white">No challenges found with the current filters. Try changing the filters or search for a different challenge.</p>
+            </div>))
           )}
         </div>
       </div>