آموزش ساختن progress bar، loader، transition و اسکرول به بالا در next.js ⏳

خلاصه :

همین سایت مرن فا رو اگر بهش توجه کنید، وقتی از یه صفحه ای میرید به یه صفحه دیگه، در بالای صفحه، یه خط آبی رنگی هست که از سمت چپ میاد و پر میشه به سمت راست و علاوه بر اون، یه تصویر و یه متن هم نمایش داده میشه؛ یا توی مثلا خیلی از وب سایت ها، وقتی که نیازه کاربر منتظر بمونه، یه خطی هست که میچرخه که نماد در حال آماده سازی بودن هست 😊 یا مثلا بعضیا درصد میازن که 100% نشون دهنده لود کامل صفحه یا مثلا لود کامل ویدئویی که کاربر منتظرشه هست. سیستم اول که توش یه نواری پر میشه رو میگیم progress bar و سیستم دوم که شامل یه سری محتوا هست رو میگیم loader 

توضیح کامل : 

آموزش progress bar در next.js – خط پرشونده در بالای صفحه 

ببینید، چندان زیاد سخت نیست. 10 دقیقه وقت بزارید، اوکی میشه.

1. پروژهتون رو توی vscode باز کنید.

2. پکیج nprogress رو لطفا نصبش کنید با کد زیر . اگر نیاز دارید در موردش هم بخونید، لطفا کلیک کنید .

npm i nprogress 

3. حالا برید توی پوشه css پروژه nextjs تون. بغل فایل اصلی css، یه فایل custom.css بسازید. این فایل، فایلی هست که به دردتون می‌خوره.
نکته: با تیلویند، میتونید 99 درصد سایت رو راه بندازید ولی گاهی اوقات پیش میاد که واسه یه چیزی، حتما باید سی اس اس خام بزنید. هر کدی داشتید اونو اینجا بزنید. مثلا ما الان نیازه که برای پروگرس بار سایت، css بنویسیم و این کد، css خام هست. اونو اینجا میزاریمش.
برید توی این فایل و این کد رو توش پیست کنید. کد رو یه نگاه بندازید، میتونید اندازه و رنگ رو شخصی سازی کنید. یکم دستکاریش بکنید، دستتون میاد که سیستمش چجوریه. حتی میتونید progressbar رو چند رنگیش کنید.

/* Make clicks pass-through */
#nprogress {
   pointer-events: none;
}

#nprogress .bar {
   background: rgb(255, 230, 0);
   position: fixed;
   z-index: 1031;
   top: 0;
   left: 0;
   width: 100%;
   height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
   display: block;
   position: absolute;
   right: 0px;
   width: 100px;
   height: 100%;
   box-shadow: 0 0 10px rgb(255, 230, 0), 0 0 5px rgb(255, 230, 0);
   opacity: 1;
   -webkit-transform: rotate(3deg) translate(0px, -4px);
   -ms-transform: rotate(3deg) translate(0px, -4px);
   transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
   display: block;
   position: fixed;
   z-index: 1031;
   top: 15px;
   right: 15px;
}

#nprogress .spinner-icon {
   width: 18px;
   height: 18px;
   box-sizing: border-box;
   border: solid 2px transparent;
   border-top-color: #29d;
   border-left-color: #29d;
   border-radius: 50%;
   -webkit-animation: nprogress-spinner 400ms linear infinite;
   animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
   overflow: hidden;
   position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
   position: absolute;
}

@-webkit-keyframes nprogress-spinner {
   0% {
      -webkit-transform: rotate(0deg);
   }
   100% {
      -webkit-transform: rotate(360deg);
   }
}
@keyframes nprogress-spinner {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

4. توی مرحله بعد، نیازه که این فایل css، با پروژه لینک بشه. برید توی فایل اصلی cssتون. این کد رو کپی کنیدش.

@import "./custom.css"; 

5. خوب، حالا برید توی فایل app.js_ پروژه نکست جی اس تون. این تیکه کد رو بنویسید لطفا.

import nprogress from "nprogress";

import Router from "next/router"; 

Router.events.on("routeChangeStart", nprogress.start);

Router.events.on("routeChangeError", nprogress.done);

Router.events.on("routeChangeComplete", nprogress.done); 

دقت کنید که توی 5 خط کد بالا، 2 خط اول، ایمپورت هستند پس باید توی بخش بالایی فایل اپ بیان یعنی خارج از تابع اصلی. 3 خط بعدی که در مورد روتر هستند، باید داخل خود تابع اصلی و قبل از بخش jsx بیان.
تموم شد. برید توی سایت و لذتشو ببرید.

آموزش Loader در next.js - نمایش gif در زمان لود صفحه

اگر میخواید زمان تغییر روت، یه تصویری نمایش داده بشه، هیچ کدوم از کارهای روش اول رو نیاز نیست انجام بدید. نمایش تصویر چندین روش داره. طبق تحقیقاتی که من کردم، بهینه ترینش اینه.

قبل از توضیح هم اینو بگم که ما یه مقاله در مورد react toastify در next.js هم داریم. اگر دوست داشتید، مطالعشون کنید. و توضیح ...

1. برید توی سایت لودینگ و یه گیف برای وب سایت next.jsتون بسازید.

2. فایل svg این گیف طراحی شده رو دانلود کنید. باقیشون بدرد نمیخورن.

3. برید توی فایل components پروژهتون و یه پوشه بسازید به اسم loader . سپس توش یه فایل index.jsx بسازید. توش این کد رو کپی کنید. دقت کنید که این کامپوننت، چیزی هست که در نهایت نشون داده خواهد شد. پس با توجه به مواردی که شما توی صفحه لودینگتون نیاز دارید، این صفحه رو تغییرش بدید.

import Image from "next/image";

const Loader = () => {

 return (

 <div className=" fixed top-0 bottom-0 right-0 left-0 flex gap-6 flex-col justify-center 
items-center bg-white ">

        <div className="  -mb-10">

            <Image

 src="/loader.svg"

 width={150}

 height={150}

 alt="website-loader"

 / >

         < /div>

         <div className=" text-3xl flex gap-1">

 className=" text-sky-500">مرن< /span>

            <span className=" text-yellow-400">فا< /span>

         < /div>

         <div>اولین مرجع تخصصی NEXT.JS ایران< /div>

      < /div>

   );

};

export default Loader;

4. حالا برید توی فایل app.js_ و تغییرش بدید. در بخش اول، این امپورت ها رو انجام بدید.

import Router from "next/router";

import { useState } from 'react';

import Loader from "../components/loader"; 

5. در بخش دوم، فایل myApp که خروجی فایل app.js_ پروژه next.js هست رو تغییرش بدید.

function MyApp({ Component, pageProps }) {

 // loader

 const [loading, setloading] = useState(false);

 Router.events.on("routeChangeStart", (url) => {

 setloading(true);

});

 Router.events.on("routeChangeError", (url) => {

 setloading(false);

});

 Router.events.on("routeChangeComplete", (url) => {

 setloading(false);

});

 return (

 <>

 {

 loading == false

 ? <>  <Header />  <Component {...pageProps} />  <Footer />  

 : <>  <Header />  <Loader />  <Footer />  

 }
    < />

  );

}

export default MyApp; 

خیلی هم عالی. تمومه. دیپلوی کنید و لذتشو ببرید.

ترنزیشن بین صفحات ( next.js transision between pages) 

روش سوم برای جابه‌جایی بین صفحات در next.js ، اینه که از ترنزیشن استفاده کنید. یعنی چی؟ اگه دقت کرده باشید به فیلم‌ها، وقتی تصویر از یه سکانس میخواد بره به یه سکانس دیگه، یهو نمیپره، بلکه تصویر اول، کم کم opacity یا شفافیتش کم میشه و همزمان باهاش، شفافیت تصویر دوم زیاد میشه و به این ترتیب، تصویر تغییر میکنه. با این کار، تغییر تصویر، نرم تر هست. یه همچین چیزی رو ما برای نکست جی اس هم داریم. چطور؟ 

1. پکیج framer motion رو نصبش کنید.

npm i framer-motion 

2. برید توی فایل اپ دات جی اس nextjs و به این صورت تغییرش بدید. 

import "../styles/globals.css";

import {motion} from "framer-motion"

function MyApp({ Component, pageProps,router }) {

 return (

 <motion.div key={router.route} initial="pageInitial" animate="pageAnimate" variants={

      {

 pageInitial:{

 opacity:0

       },

 pageAnimate:{

 opacity:1

       }

    }

 }>

      <Component {...pageProps} />

    < /motion.div>

  );

}

export default MyApp;

همین و تمام.

 اسکرول به بالا با تغییر روت

فکر میکنم که مکانیزمش رو با خوندن کد های بالا، یاد گرفتید، به طوری کلی نیازه که یه رویدادی توی فایل اپ دات جی اس درست کنید. این یکی هم شبیه همون قبلیاست فقط 1) پکیج نیاز نداره. 2) مکانیزمی که نیازه توی فایل app.js_ بزارید، اینه

import { useEffect } from "react";

import { useRouter } from "next/router"; 

const router = useRouter();

 useEffect(() => {

 const handleRouteChange = () => {

 document.getElementById('top').scrollIntoView();

}

 router.events.on('routeChangeComplete', handleRouteChange)

  }, []); 

تموم.

دکمه اسکرول به بالا در nextj.js

یه نکته رو هم خوبه همینجا بگم. توی سایت ها، یه دکمه اسکرول به بالا همیشه وجود داره. توی سایت next.jsای کد مورد نیاز اون، اینه.

const goTopCtrl = () => {

 window.scrollTo({

 top: 0,

 behavior: "smooth",

      });

   }; 

استفادهش هم اینجوریه:

<button onClick={goTopCtrl}>click me< /button> 

اگر متمایل هستید که در مورد ابزارهای مورد نیاز یه برنامه نویس مرن استک بدونید، لطفا کلیک کنید.

ممنون میشم که راجع به این مقاله نظر بدید و با عزیزان دیگه، به اشتراک بزاریدش. 😉