LinkTreeを使用しないでください.ビルドあなた自身😎

9344 ワード
テキストリンク
ので、人々はすべてのソーシャルメディアプラットフォームであなたと接続することができますので、今日、我々はあなたがすべてのソーシャルメディアアカウントをリンクできるアプリを作成するつもりです.

私たちは何を建てていますか。


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

設定


次のアプリケーションを作成する


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

クリーンアップ


ページ/インデックスのすべてを削除します.閉じるこの動画はお気に入りから削除されています
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>
  )
}

アプリの起動


npm run dev # npm
yarn dev # yarn

リンクコンポーネントの作成


私たちはcomponents ディレクトリのルートのフォルダとファイルリンクを作成します.js

機能コンポーネントの作成


このような機能コンポーネントをリンクファイルに作成します.
function Links() {
    return (
        <div>

        </div>
    )
}

export default Links
我々は3つの小道具を追加する必要がありますimage , text and link 何度も同じコードを貼り付ける代わりに、このコンポーネントを再利用するつもりです.
function Links({ image, text, link }) {
我々は今、小道具を使用し、画像とテキストでアンカータグをレンダリングします
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;

リンクのレンダリング


現在インデックスで.JS我々はヘッドの下の小道具とリンクコンポーネントを追加します
<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"
      />
これを追加した後、我々は最適化された次のイメージを使用しているとしてエラーが表示されます.

次のドメインをホワイトリストする必要があります.設定.js
  • 次のファイルを作成します.設定.プロジェクトのルートのJSと以下を追加します.
    • module.exports = {
  images: {
    domains: ["cdn.hashnode.com"],
    },
};
  • 今、サーバーを再起動する必要がありますし、エラーはもうありません.
  • 手順を実行した後、これを見ることができる

    • リンクの追加


    私は、これらのリンクを加えています
    <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"
        />
    これらは私が必要とするすべてのリンクです、あなたが必要として/削除/編集これらのリンクを追加する自由を感じる.
  • 次の画像に使用するドメインを追加してください.設定.jsこれは私が使ったドメインです.
    • module.exports = {
  images: {
    domains: [
      "cdn.hashnode.com",
      "upload.wikimedia.org",
      "cdn.iconscout.com",
      "www.freepnglogos.com",
      "www.edigitalagency.com.au",
      "icons-for-free.com",
    ],
  },
};
    この手順を実行した後に、次のようなページが表示されます

    スタイリング


    背景の追加


    現在の背景は白と退屈ので、代わりに背景画像を追加します.私は、イメージを得ていますUnsplash 他にも何かを使うことができます.
    私はこのイメージを選んでいます.

    インデックスのメインdivで.私はこの背景イメージとBGカバーのクラス名を加えます.
    <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"
>

    スタイリングリンク


    たった今バックグラウンドで我々は適切にテキストを見ることができないので、いくつかのスタイルをリンクに加えましょう.私はガラスのようなデザインの大ファンです.
      <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}
  >
    ホバーアニメーションの追加
    transform hover:-translate-y-1 hover:scale-110 transition duration-200 ease-in-out
    アンカータグにこれらのクラスを追加する場合は、ホバーで素敵なスケーリングアニメーションを取得します.
    https://www.loom.com/share/85becf4fac1345c384f36ac226cf6f7b
    最後に、テキストにいくつかのスタイルを追加します
    <h2 className="ml-3 text-xl font-semibold md:ml-6">{text}</h2>

    別のタブでリンクを開く


    現在、リンクはアプリと同じタブで開いています.新しいタブでのリンクを開くユーザーのためのより良い経験になります.これらの2つの属性を追加することで、新しいタブでリンクが開きます.
        <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"
    >

    すべてのリンクの上にアバターと名前を加えること


    すべてのリンクタグの上に、私は私のイメージと名前を含んでいるこのdivを加えます.
          <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>
    おめでとう!🥳🎉 あなたのカスタムリンクのアプリを作成している.今すぐあなたの友人と共有することができますあなたのブログに追加し、さらに多くの.
    あなたのリンクアプリを作成するために管理する場合は、独自の方法でスタイルを自由に感じるし、コメントのリンクを削除します.こちらmine .
    便利なリンク
    GitHub repo
    NextJS docs
    Tailwind docs
    Connect with me
    Swift, Structures & Classes
    CSSで無限スクロールアニメーションを作成する💥