Utwórz aplikację next-js:

Po pierwsze, musimy stworzyć Next.js aplikacji przy użyciu NPX lub przędzy według swojego wyboru.

jeśli już tworzysz aplikację Next.js, pomiń tę część

Wpisz to polecenie w terminalu lub cmd:

npx create-next-app project-name
(or)
yarn create-next-app project-name

npx create-next-app bootstrap-icon-with-nextjs

Dodajemy ikony ładowania początkowego w Next.js na dwa sposoby:

1. Zainstaluj ikony Bootstrap — w tym pliki SVG i czcionki ikon z npm.
2. Dodawania czcionek ikonę arkusza stylów CDN ogniwo Next.js <head> Tag

Zainstaluj ikony Bootstrap:

npm i bootstrap-icons

Ważne:
_app.js plik renderowanie wszystkich stronach internetowych załadować CSS bootstrap-ikony

Teraz przechodzimy do drugiej metody🚶‍♂️

Dodanie linku do arkusza stylów ikon CDN w Next.js wewnątrz tagu <Head> :

## Bootstrap-Icon CDN Link ##
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
## Import the module in the file ##
import Head from "next/head"

      

       Bootstrap-icon CDN link added in Next.js inside  Tag
      

Zrzut ekranu:

Na koniec instalujemy Bootstrap-Icons obie metody.

Wrzucam cały kod w repozytorium GitHub
Link do repozytorium — Kliknij tutaj [z dwoma rozgałęzieniami dla obu metod],
aby uzyskać więcej informacji, przeczytaj plik README.md w moim repozytorium

💡Protip:
  Run your Next.js App with diffrent port using this command
  npx next -p 4_DIGIT_NUMBER
  E.X : npx next -p 1998

Link referencyjny:
Bootstrap-Icons —https://icons.getbootstrap.com/