So today we are going to create an app where you can link all your social media accounts so people can connect with you on all social media platforms.

What are we building?

https://www.loom.com/share/2535312c245247e6ab4348e9400b0009

Setting up

Creating a Next app with TailwindCSS

npx create-next-app -e with-tailwindcss links-app

Cleanup

Delete everything in pages/index.js after the Head till the footer it should look like this

import Head from 'next/head'

export default function Home() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

    </div>
  )
}

Starting the app

npm run dev # npm
yarn dev # yarn

Creating a `Links` component

We will create a components folder in the root of the directory and create a file Links.js.

Creating a functional component

I will create a functional component like this in the links file.

function Links() {
    return (
        <div>

        </div>
    )
}

export default Links

We need to add 3 props image, text and link because we are going to reuse this component instead of pasting the same code again and again.

function Links({ image, text, link }) {

We will now use the props and render out an anchor tag with an image and text

import Image from "next/image";

function Links({ image, text, link }) {
  return (
    <a href={link}>
      <Image width={40} height={40} src={image} alt={text} />
      <h2>{text}</h2>
    </a>
  );
}

export default Links;

Rendering the Links

Now in index.js we will add the Links component with the props below the Head

<Links image="https://cdn.hashnode.com/res/hashnode/image/upload/v1611902473383/CDyAuTy75.png?auto=compress"
        link="https://avneesh0612.hashnode.dev/"
        text="Checkout my blogs on Hashnode"
      />

After we add this we will see an error as we are using the optimized Next image.

We need to whitelist the domain in next.config.js.

So create a file next.config.js in the root of the project and add the following.

module.exports = {
  images: {
    domains: ["cdn.hashnode.com"],
    },
};

Now we need to restart the server and the error is not there anymore.
After following the steps you will be able to see this

Adding more links

I am adding these links

<Links
          image="https://upload.wikimedia.org/wikipedia/commons/e/e7/Instagram_logo_2016.svg"
          link="https://www.instagram.com/avneesh.codes/"
          text="Follow me on Instagram"
        />
     <Links
        image="https://cdn.hashnode.com/res/hashnode/image/upload/v1611902473383/CDyAuTy75.png?auto=compress"
        link="https://avneesh0612.hashnode.dev/"
        text="Checkout my blogs on Hashnode"
      />
        <Links
          image="https://cdn.iconscout.com/icon/free/png-512/discord-2474808-2056094.png"
          link="https://discord.gg/e3sDQjSnDK"
          text="Join my Discord server"
        />
        <Links
          image="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Octicons-mark-github.svg/2048px-Octicons-mark-github.svg.png"
          link="https://github.com/avneesh0612"
          text="Look at my code on Github"
        />
        <Links
          image="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png"
          link="https://twitter.com/AvneeshAgarwa12"
          text="Follow me on Twitter"
        />
        <Links
          image="https://www.edigitalagency.com.au/wp-content/uploads/Linkedin-logo-icon-png.png"
          link="https://www.linkedin.com/in/avneesh-agarwal-78312b20a/"
          text="Connect with me on LinkedIn"
        />
        <Links
          image="https://icons-for-free.com/iconfiles/png/512/suitcase+work+icon-1320165848716624003.png"
          link="https://avneeshresume.netlify.app/"
          text="Checkout my resume"
        />

These are all the links I need, feel free to add/remove/edit these links as you need.

Remember to add the domains you use for images to next.config.js. Here is all the domains I used-

module.exports = {
  images: {
    domains: [
      "cdn.hashnode.com",
      "upload.wikimedia.org",
      "cdn.iconscout.com",
      "www.freepnglogos.com",
      "www.edigitalagency.com.au",
      "icons-for-free.com",
    ],
  },
};

After doing the steps given you will see a page similar to this

Styling

Adding a background

The current background is white and boring so I will add a background image instead. I am getting an image from Unsplash You can use something else as well.
I am choosing this image.

In the main div of index.js I am going to add this background image and a className of bg-cover.

<div
 style={{
        background:
          "url(https://images.unsplash.com/photo-1517707711963-adf9078bdf01?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80)",
      }}
  className="flex flex-col !bg-cover items-center justify-center min-h-screen py-2"
>

Styling the links

Right now with the background we cannot see the text properly so let's add some styles to the links. I am a big fan of glassmorphic design so here is a glassmorphic link-

  <a
    className="flex items-center w-full max-w-md cursor-pointer p-3 my-3 mx-auto rounded-md ring-[1px] ring-blue-300 backdrop-filter backdrop-blur-2xl bg-white bg-opacity-25 shadow-xl"
    href={link}
  >

Adding a hover animation

transform hover:-translate-y-1 hover:scale-110 transition duration-200 ease-in-out

If you add these classes to the anchor tag you will get a nice scaling animation on hover.

https://www.loom.com/share/85becf4fac1345c384f36ac226cf6f7b

Finally, we will add some styles to the text

<h2 className="ml-3 text-xl font-semibold md:ml-6">{text}</h2>

Opening the links in another tab

Currently, the link is opening in the same tab as the app. Opening the links in a new tab will be a much better experience for the user. By adding these two attributes the link will open in a new tab.

    <a
      className="flex items-center w-full max-w-md cursor-pointer transform hover:-translate-y-1 hover:scale-110 transition duration-200 ease-in-out p-3 my-3 mx-auto rounded-md ring-[1px] ring-blue-300 backdrop-filter backdrop-blur-2xl bg-white bg-opacity-25 shadow-xl"
      href={link}
      rel="noreferrer"
      target="_blank"
    >

Adding an avatar and name above all the links

Above all the link tags I will add this div containing my image and name.

      <div className="flex flex-col items-center justify-center mt-5">
        <Image
          width={200}
          height={200}
          className="mx-auto rounded-full"
          src="https://res.cloudinary.com/dssvrf9oz/image/upload/v1625825953/Avneesh_Avatar_gukdsk.png"
          alt="Avneesh Agarwal"
        />
        <h2 className="my-3 text-3xl font-bold text-center text-indigo-900 md:text-4xl">
          Avneesh Agarwal
        </h2>
      </div>

Congratulations! 🥳🎉 You have created your custom links app. Now you can share it with your friends, add it to your blogs, and many more.

If you managed to create your links app feel free to style it in your own way and drop the links in the comments. Here is mine.

Useful links -