feat: Migration to NextJs

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

components/Footer.js

@@ -1,8 +1,9 @@
+import Link from "next/link";
+
 export default function Footer() {
   return (
     <footer className="flex justify-center mt-8 italic">
-      Powered by{" "}
-      <a href="https://github.com/EddieHubCommunity/LinkFree">EddieHub</a>
+      Powered by <Link href="https://github.com/EddieHubCommunity/LinkFree"><span>EddieHub</span></Link>
     </footer>
   );
 }

components/layouts/MultiLayout.js

@@ -4,9 +4,9 @@ import Footer from "../Footer";
 export default function MultiLayout({ children }) {
   return (
     <>
-      <Navbar></Navbar>
+      <Navbar />
       <main>{children}</main>
-      <Footer></Footer>
+      <Footer />
     </>
   );
 }

components/layouts/SingleLayout.js

@@ -4,7 +4,7 @@ export default function SingleLayout({ children }) {
   return (
     <>
       <main>{children}</main>
-      <Footer></Footer>
+      <Footer />
     </>
   );
 }

components/navbar/NavLink.js

@@ -21,7 +21,7 @@ export default function NavLink({ path, item, mode }) {
 
   return (
     <Link href={item.url}>
-      <a className={className} aria-current="page" key={item.name}>
+      <a className={className} aria-current="page">
         {item.name}
       </a>
     </Link>

components/navbar/Navbar.js

@@ -1,6 +1,7 @@
 import { useRouter } from "next/router";
 import NavLink from "./NavLink";
 import app from "../../config/app.json";
+import Image from "next/image";
 
 export default function Navbar() {
   const router = useRouter();
@@ -26,16 +27,17 @@ export default function Navbar() {
           <div className="flex items-center justify-between h-16">
             <div className="flex items-center">
               <div className="flex-shrink-0">
-                <img
-                  className="h-8 w-8"
+                <Image
                   src="/logo192.png"
                   alt="EddieHub logo"
+                  width={32}
+                  height={32}
                 />
               </div>
               <div className="hidden md:block">
                 <div className="ml-10 flex items-baseline space-x-4">
                   {primary.map((item) => (
-                    <NavLink path={router.asPath} item={item} />
+                    <NavLink key={item.name} path={router.asPath} item={item} />
                   ))}
                 </div>
               </div>
@@ -99,8 +101,8 @@ export default function Navbar() {
 
         <div className="md:hidden" id="mobile-menu">
           <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-            {primary.map((item) => (
-              <NavLink path={router.asPath} item={item} mode="mobile" />
+            {primary.map((item, index) => (
+              <NavLink key={index} path={router.asPath} item={item} mode="mobile" />
             ))}
           </div>
           <div className="pt-4 pb-3 border-t border-gray-700">

pages/[username].js

@@ -49,14 +49,16 @@ export default function User({ data }) {
           </div>
         </div>
         <p className="flex justify-center my-4">{data.bio}</p>
+        <div className="flex flex-col items-center w-full">
         {data.links &&
-          data.links.map((link) => (
-            <UserLink link={link} username={data.username} />
+          data.links.map((link, index) => (
+            <UserLink key={index} link={link} username={data.username} />
           ))}
+        </div>
         <div className="my-8"></div>
         {data.milestones &&
-          data.milestones.map((milestone) => (
-            <div className="flex">
+          data.milestones.map((milestone, index) => (
+            <div className="flex" key={index}>
               <div className="w-14 border-l-4 flex flex-col">
                 <div className="border-dashed border-b-2 grow"></div>
                 <div className="grow"></div>

pages/index.js

@@ -1,4 +1,5 @@
 import Head from "next/head";
+import Link from "next/link";
 import singleUser from "../config/user.json";
 
 export async function getStaticProps(context) {
@@ -27,8 +28,19 @@ export default function Home() {
         />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
-      <h1 className="text-3xl font-bold underline">Home</h1>
+      <main className="py-6">
+      <h1 className="text-3xl font-semibold text-center mb-6">LinkFree connects audiences to all of your content with just one link</h1>
+      <p className="text-2xl font-normal text-center mb-6">
+          It is an open-source alternative to Linktree implemented in JavaScript
+        </p>
+        <p className="text-1xl text-center">
+          See <Link href="/eddiejaoude"><span className="text-cyan-600 cursor-pointer">Eddie Jaoude&apos;s</span></Link> profile for an
+          example. Want to add your profile? Read the{' '}
+          <Link href="https://github.com/EddieHubCommunity/LinkFree#-to-add-your-profile">
+            <span className="text-cyan-600 cursor-pointer">instructions</span>
+          </Link>.
+        </p>
+      </main>
     </>
   );
 }

pages/search.js

@@ -36,20 +36,22 @@ export default function Search({ users }) {
         <meta name="description" content="Search LinkFree user directory" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <h1 className="text-3xl font-bold underline">Search</h1>
+      <div className="flex flex-col px-6 align-center">
+      <h1 className="text-3xl mb-4  font-bold underline">Search</h1>
       <input
         placeholder="Search users"
-        className="border-2 border-sky-500 rounded"
+        className="border-2 hover:border-sky-500 transition-all duration-250 ease-linear rounded px-6 py-2"
         name="keyword"
         onChange={(e) => filterData(e.target.value)}
       />
       <ul>
         {filteredUsers.map((user) => (
-          <li>
+          <li key={user.username}>
             <UserPreview profile={user} />
           </li>
         ))}
       </ul>
+      </div>
     </>
   );
 }