ስለ Next.js እና Tailwind CSS 🔥

ከሶስት ወራት በኋላ ልምዴ፤ Next.js, Tailwind CSS, Framer Motion

Amharic

ሰላም ሰላም፣ ከቀድሞው ፖስት በኋላ እንግዲህ እዚህ እንገናኛለን። ለቀድሞ ፖስቴ Multiple Reactions ይመልከቱ።

ይህ ጊዜ አዲስ ባህሪ አልነጋገርም፤ ነገር ግን ከሶስት ወር መጠን በኋላ Next.js፣ Tailwind CSS እና Framer Motion መጠቀም እንዴት እንደሆነ እንካፈላለን።

እሺ፣ ሶስት ወራት። እነዚህን ቴክኖሎጂዎች ሁሉ በዚህ ድር ጣቢያ ሲፈጥር ለመጀመሪያ ጊዜ ነበር የተጠቀምኩባቸው (23 ኦክቶበር 2022 በአካባቢ).

ሁሉም ከዚህ ትዊት ጀምሮ ነበር።

የራሴን ልምድ እጋራለሁ፤ ከሌሎች ቴክ ክምችቶች ጋር አልነጻጸርም ምክንያቱም እርግጥ ብዙ አልተጠቀምኩባቸውም።

እንጀምር…

Next.js

ከዚህ በፊት የReact ፕሮጀክቶችን በCRA ግርግር አስጀምር ነበር፤ በዚህ ፕሮጀክት ግን Next.js ጀመርሁ።

በክፍት ነገር፣ Next.js ለመጠቀም ቀላል እና የሚያምር ነው። እኔ የምፈልጋቸው አስፈላጊ ባህሪያት አሉት፣ DX ጥሩ ነው፣ ሰነዶቹ ዝርዝር ናቸው እና ትምህርቶቹ ቀጥተኛ ናቸው።

በጣም የሚያምር ነገር የSSG እና የSSR ድጋፍ ነው። እነዚህ እዚህ የምወዳቸው ጥቂት ባህሪያት ናቸው፦

መመሪያ መንገዶች (Routing)

ይህ እጅግ አስፈላጊ ነው። ከቦክስ ውጭ ያለ መንገድ ድጋፍ አለው፣ የተቀየረ ገጽ (dynamic page) እንኳ ለብሎግ በጣም ቀላል ነው።

እኔ በጣም የምወደው የAPI Routes ነው። ኤንድፖይንት መፍጠር ቀላል ነው፣ ተዘጋጅተው ያሉ መንገዶች በቀጥታ ይጠቀማሉ፤ Express ማቀናበር አያስፈልግም።

MDX ድጋፍ

@next/mdx በመጠቀም markdown/MDX ለብሎግ መፍጠር ቀላል ነው።

የመደበኛ ገጽ ለመገንባት ይረዳል፣ ብዙ ጽሁፍ ያለው ገጽ እንኳ በMDX ቀላል ነው።

ኦፕቲማይዜሽን

ፊደል እና ምስል አጠቃቀም በNext.js እንኳን ተሻሽሎ ነው።

Google Fonts በ@next/font ቀጥታ ይመጣሉ፤ ምስሎች ኮምፕሬሽን እና srcset ራሱ ይደገፋል።

እንግዲ ምን ያልሆነ ነገር አለ?

ብዙ ትንሽ ባህሪያት አሉ፣ ፈጣን ኮምፒሌሽን፣ i18n መንገድ፣ static HTML export ወዘተ።

ሰነዶቹን በጥቂት ይመልከቱ ወይም በቀጥታ ይሞክሩ።

Tailwind CSS

ከTailwindcss.com የሆነውን የምሳሌ ኮድ ይመልከቱ፣ ስታይሊንግ በTailwind ነው።

<figure class="rounded-xl bg-slate-100 p-8 md:flex md:p-0 dark:bg-slate-800">
  <img
    class="mx-auto h-24 w-24 rounded-full md:h-auto md:w-48 md:rounded-none"
    src="/sarah-dayan.jpg"
    alt=""
    width="384"
    height="512"
  />
  <div class="space-y-4 pt-6 text-center md:p-8 md:text-left">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale on large teams.
        It’s easy to customize, adapts to any design, and the build size is
        tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">Sarah Dayan</div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>
HTML
UTF-8

መጀመሪያ እንዲህ አስቤ ነበር፦

የስታይሊንግ አቀራረቡ አስቂኝ አይደለም? HTML የተወደቀ አይመስልም? እንዲህ ከሆነ ለምን ኢንላይን ስታይል አንጠቀም?

Ah pokokna mah banyak ini-itu nya 😂

ግን ከTailwind ጋር የተያያዙ ፍሪላንስ ፕሮጀክቶች ከጀመሩ በኋላ እኔም ጀመርሁ።

እንግዲህ በጣም ጥሩ ነው ማለት አለብኝ፤ በዚህ ድር ጣቢያ ላይ ተተግብሯል።

ምን ያህል ጥሩ ነው?

  • Gaperlu gunti-ganti file buat styling

    Markup እና styles በቦታ አንድ ናቸው፤ CSS ፋይል መክፈት እና ክላስ መፈለግ አያስፈልግም።

    ስታይሎቹ በHTML ላይ መካተታቸው ምክንያት ኮምፖነንት መፍጠር/ማዘመን ፈጣን ነው።

    ፋይሉን ብቻ ተክፈት፣ ይዘቱን እና ስታይሉን በአንድ ቦታ ቀይር 🔥


  • Berbeda dengan inline styles

    ከinline styles ይልቅ የበለጠ ተስማሚ ነው፤ hover፣ focus ያሉ ተፅእኖዎች በHTML ውስጥ ቀጥታ ይሰራሉ።


  • Full CSS support

    ከCSS ሁሉ በኩል አብዛኛውን Tailwind ይሸፍናል፤ gradient፣ backdrop፣ grid፣ responsive design ወዘተ።

    Makin banyak dong utility classnya?

    እሺ! VS Code ተቆማለች ማስፋፊያ አለው እና የTailwind ክላሶችን በautocomplete ያሳያል።


  • Shorthand Utilities

    ለምሳሌ inset-0 የሚከተለውን CSS ይወጣል፦

    .inset-0 {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

    እንዲሁም x/y እንደ ማጭር ቃላት፣ ለምሳሌ inset-x-0፣ px-2፣ border-y-0 ወዘተ።


  • ዳርክ ሞድ ድጋፍ

    Tailwind CSS አስቀድሞ በdark: ተብሎ የሚጠራ የutility ክላስ (variant) ያቀርባል ለdark mode ስታይሊንግ።

    ምሳሌ:

    <div class="text-black dark:text-white">Hello, World!</div>

    ላይ ያለው 'Hello, World!' ጽሑፍ ነባር ጥቁር ይሆናል፣ በdark mode ግን ነጭ ይሆናል።


  • Output size CSS-nya kecil

    Tailwind CSS የተጠቀሙትን utility ብቻ ስለሚያነጣጥር ውጤቱ ትንሽ ነው እና ከተጠቀሙት ብዛት ጋር ይመራራል።


የማይሆን ወገን አለ? አዎን አለ።

ረጅም የclass ስም

ይህ አንድ ጊዜ በTwitter ውስጥ ተወያየ 😂 እኔ ግን clsx() በመጠቀም ትንሽ ማቅረብ አደረግሁ። መልክ፦

<nav
  className={clsx(
    'border-divider-light rounded-xl border bg-white',
    'dark:border-divider-dark dark:bg-slate-900'
  )}
></nav>
JavaScript React
UTF-8

  • በHTML ላይ ጭነት ይጨምራል

    CSS ውጤት ቢትንሽም የHTML ውጤት ይጨምራል፤ ምክንያቱም ረጅም የclass ስሞች መጠኑን ያድጋሉ። መፍትሄ አለ፤ ወደ አሮጌ መንገድ ተመለስ፣ ክላሶች ብዙ ቢሆኑ ወይም በድጋሚ ቢጠቀሙ መደበኛ CSS class ተጠቀም።

    የምሳሌ ጉዳይ፦

    <div
  class="text-accent-600 dark:text-accent-400 hover:text-accent-700 hover:dark:text-accent-300 flex h-9 items-center gap-1 rounded-xl px-2 text-[13px] font-bold dark:font-semibold"
>
  Home
</div>
<div
  class="text-accent-600 dark:text-accent-400 hover:text-accent-700 hover:dark:text-accent-300 flex h-9 items-center gap-1 rounded-xl px-2 text-[13px] font-bold dark:font-semibold"
>
  Projects
</div>
<div
  class="text-accent-600 dark:text-accent-400 hover:text-accent-700 hover:dark:text-accent-300 flex h-9 items-center gap-1 rounded-xl px-2 text-[13px] font-bold dark:font-semibold"
>
  Blog
</div>
    HTML
    UTF-8

    እንዲህ አስተካክልኩ፦

    <div class="nav-link">Home</div>
<div class="nav-link">Projects</div>
<div class="nav-link">Blog</div>
    HTML
    UTF-8

    እንዲሁ የHTML ጭነትን መጠን ሊቀንስ ይችላል።

Framer Motion

እንቅስቃሴ ስራዎች ላይ። ኮምፕሌክስ አኒሜሽን አልፈጠርም፤ መሰረታዊ ነገሮች ብቻ (fade‑in/fade‑out) ነበሩ።

በJavaScript አኒሜሽን መስራት ለእኔ አዲስ ልምድ ነበር (ቀድሞ CSS ብቻ ነበር)።

መልኩ? ጥሩ ነው፣ ውጤቱም ለስላሳ ነው። JavaScript ስለሆነ በክስተቶች ላይ አኒሜሽን መነሳት ቀላል ነው፤

ለምሳሌ onClick፣ onScroll፣ ኮምፖነንት ሲጀምር ወይም አካሉ በviewport ሲታይ ጊዜ።

ተጨማሪ ነጥብ

  1. Vercel

    ቀድሞ ለstatic pages (CRA) ብቻ የGitHub Pages ነበር። አሁን ግን የNext.js ፕሮጀክቶችን በVercel እንሰዳለን።

    Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.

    — vercel.com/

    ዲፕሎይ ማዘጋጀት ቀላል እና ፈጣን ነው፤ staging/preview መንቀሳቀስ አለው እና ነጻ እትም አለ።

    ለNext.js ፕሮጀክቶች ተመከር — እንዲሁም Next.js የVercel ነው 😂

ማጠቃለያ

Next.js፣ Tailwind CSS እና Framer Motion መጠቀም ደስ የሚል ልምድ ነው፤ DX ጥሩ ነው፣ መጠቀም ቀላል ነው እና ሰነዶቹ ጥሩ የተዘጋጁ ናቸው።

እንኳን አዲስ ቢሆንም ይህ ቴክ ክምችት በድር ጣቢያ ስራዬ ውስጥ የመጀመሪያ ምርጫ ይሆናል ብዬ አመናለሁ።

እስካሁን ድረስ እንዲህ ነው፤ ጤና ይስጠን እና እልፍኝ ሳምንት ደረስ እንገናኝ 👋

Posted onstorywith tags:
#next#tailwindcss#framer-motion
0
0
0
0