fonte immagine: https://dribbble.com/christophekerebel

Next.js - Crea facilmente il tuo componente indicatore della barra di avanzamento !!!

In questo articolo, creeremo un componente Next.js che può essere facilmente modificato per tutti i tipi di utilizzo utilizzando il pacchetto NProgress e lo useremo nella nostra app Next.js.

Originariamente pubblicato su https://gosink.in/next-js-make-your-own-progress-bar-indicator-component-easily/

Se stai creando un'applicazione Next.js o qualsiasi app Server-Side Rendering (SSR), sembra interessante se c'è una barra di avanzamento che mostra l'avanzamento durante il caricamento di una nuova pagina. Attualmente (gennaio 2019) sto costruendo un boiler. Next.js per le mie nuove app e volevo aggiungere un componente della barra di avanzamento perché se non creo un componente che può essere modificato facilmente passando i puntelli, sarebbe inutile perché Devo rifare tutto il lavoro per tutte le mie nuove app. Quindi ho finito per creare un pacchetto NPM.

Se non vuoi seccature, importa questo pacchetto e vedi la descrizione per l'uso.

npm i nextjs-progressbar

Cosa dovresti sapere prima di creare questo componente

Mi aspetto che tu sappia cosa sono Next.js, React.js, Server Side Rendering (SSR) e come creare un personalizzato in Next.js.

Installare i pacchetti

Per creare questa barra di avanzamento, utilizzeremo NProgress.

npm i nprogress

Codice

Dividere il codice

Importare i pacchetti

Crea un file index.js e importa:

  • Reagisci: per creare componenti
  • NProgress: per visualizzare la barra di avanzamento
  • Router successivo: per gestire tutte le modifiche ai percorsi / router.
  • PropTypes: per la validazione degli oggetti di scena. (opzionale)

Creazione di un componente

Innanzitutto, dobbiamo includere il CSS del pacchetto NProgress. Siamo in grado di utilizzare CDN ma vogliamo rendere questo componente riutilizzabile. Quindi, ho appena copiato il CSS e l'ho aggiunto all'interno del metodo di rendering. Come già sapete, è troppo semplice aggiungere CSS nel metodo di rendering in Next.js. Ho aggiunto colore

Impostazione dei puntelli predefiniti

  • color: per impostare il colore della barra di avanzamento. (Può accettare input HEX, RGB o RGBA)
  • startPosition: per impostare la posizione iniziale della barra di avanzamento. (0.3 = 30%)
  • stopDelayMs: dopo aver modificato il percorso (o se si è verificato un errore nel router), rimuove la barra di avanzamento dopo questo ritardo in ms.
  • altezza: per modificare l'altezza della barra di avanzamento. (altezza in px)

Configurazione di NProgress e aggiunta di eventi del router - routeChangeStart, routeChangeComplete & routeChangeError

  • routeChangeStart: questo metodo imposta la posizione iniziale della barra di avanzamento e inizia ad aumentare la lunghezza della barra di avanzamento in base alle opzioni fornite.
  • routeChangeComplete & routeChangeError: per questi eventi, per prima cosa cancelliamo tutti i timer esistenti impostati in precedenza (è molto importante se si imposta un valore elevato per il timer) e si imposta un nuovo timer che rimuove la barra di avanzamento dopo il periodo di tempo specificato.

Abbiamo impostato tutti questi Eventi router e altre opzioni (che sono passati usando i puntelli) nel metodo componentDidMount (devi sapere il motivo dietro questo).

Impostazione dei PropTypes (opzionale)

NextNProgress.propTypes = {
  colore: PropTypes.string,
  startPosition: PropTypes.number,
  stopDelayMs: PropTypes.number,
  opzioni: PropTypes.object,
};

Come puoi vedere è abbastanza semplice e diretto. Aggiungete una nuova proprietà alla vostra classe e specificate i tipi di dati previsti degli oggetti di scena che ricevete. Non è obbligatorio ma è una buona pratica se hai intenzione di spingere il tuo codice in produzione.

Aggiunta del nostro componente in un'app Next.js

Per aggiungere questo componente per tutte le pagine dell'app Next, è necessario includerlo nel file _app.js nella cartella delle pagine. Immagino che il metodo di rendering del tuo file _app.js assomiglierebbe a questo:


  // altra logica personalizzata
  

Ora importa il tuo componente personalizzato in questo file.

dopo aver importato il componente, aggiungilo all'interno di . Ora il metodo di rendering dovrebbe apparire così:


  // altra logica personalizzata
  
  

E ... questo è tutto.

Cambia le configurazioni

Come abbiamo discusso che stiamo realizzando un componente che può essere facilmente modificato e probabilmente, sai come cambiare queste configurazioni passando i puntelli a questo componente. Queste sono le configurazioni predefinite:

Se vuoi aggiungere / modificare alcune altre configurazioni, vedi questo link, ha tutte le altre configurazioni fornite da NProgress. Esempio per aggiungere queste configurazioni:

Le note

Fammi sapere se hai qualche idea migliore per fare una barra di avanzamento o vuoi aggiungere / rimuovere qualsiasi funzione o qualcosa. Tutti i suggerimenti sono apprezzati.