Spis treści[Ukryć][Pokazać]
Podczas wybierania biblioteki lub frameworka oprogramowania zwykle bierze się pod uwagę doświadczenie programisty.
Kiedy wspominam o „doświadczeniu programisty”, mam na myśli sposób, w jaki programiści faktycznie wykonują pracę. Deweloperzy wybierają biblioteki lub frameworki, które są przyjemne w użyciu.
To jeden z głównych powodów, dla których mamy teraz najpopularniejsze biblioteki i frameworki. Jako programiści nie musimy zaczynać od zera, gdy istnieją już narzędzia, które pomagają nam w wykonywaniu naszych zadań.
Frameworki to oprogramowanie, które jest tworzone i używane przez programistów do tworzenia aplikacji, a NextJS jest jednym z nich.
W tym poście omówimy Nextjs, jego kluczowe funkcje i sposób, w jaki możemy go wykorzystać do zbudowania aplikacji. Wskoczmy od razu.
Co to jest Next.js?
Next.js to framework JavaScript do szybkiego i łatwego tworzenia statycznych stron internetowych i aplikacji internetowych opartych na React. Pozwala projektować świetne aplikacje internetowe na różne platformy, w tym Windows, Linux i Mac.
Powinieneś być zaznajomiony z frameworkiem Next.js, jeśli masz minimalną znajomość React i chcesz dowiedzieć się więcej o ekosystemie React.
Mimo że Next.js zawiera wszystko, czego potrzebujesz, aby rozpocząć, możesz wybrać między NPM i przędzą, JavaScript i TypeScript, CSS i SCSS, eksportem statycznym i wdrażaniem bezserwerowym.
Korzyści
- Routing jest wykonywany automatycznie — nie musisz niczego konfigurować, ponieważ każdy adres URL jest mapowany do systemu plików, do plików w folderze pages (oczywiście masz opcje dostosowywania).
- Komponenty pojedynczego pliku — łatwo jest dodać style ograniczone do komponentu za pomocą styled-jsx, który jest całkowicie zintegrowany i tworzony przez ten sam zespół.
- Ponowne ładowanie Hot Code — gdy Next.js wykryje modyfikację zapisaną na dysku, ponownie ładuje stronę.
- Dynamic Components – Możesz dynamicznie ładować moduły JavaScript i komponenty React.
- Eksporty statyczne — Next.js umożliwia wyeksportowanie całkowicie statycznej witryny z aplikacji za pomocą następnego polecenia eksportu.
- Kompatybilność ze środowiskiem — Next.js bezproblemowo integruje się z ekosystemami JavaScript, Node i React.
- Automatyczne dzielenie kodów — do renderowania stron używane są tylko wymagane biblioteki i JavaScript. Zamiast tworzyć pojedynczy plik JavaScript zawierający cały kod aplikacji, Next.js inteligentnie dzieli aplikację na wiele zasobów.
Jak stworzyć aplikację next.js?
Instalacja
Możesz użyć polecenia node npx, aby zainstalować i zbudować projekt Next.js.
Spowoduje to wygenerowanie folderu i wszystkich plików, konfiguracji i innych elementów wymaganych do uruchomienia projektu Next.js.
Możesz uruchomić aplikację po jej wygenerowaniu.
Strony i routing
Aby obsługiwać trasy za pomocą Next.js, nie musimy używać frameworka routingu. Konfiguracja routingu z Next.js jest bardzo prosta. Gdy używasz polecenia create-next-app do tworzenia nowej aplikacji Next.js, aplikacja domyślnie tworzy folder o nazwie „pages”.
Ten folder „pages” to miejsce, w którym zarządzasz swoimi trasami. W rezultacie każdy plik komponentu reaguje w podkatalogu będzie obsługiwany jako osobna trasa.
Na przykład, jeśli folder zawiera te pliki:
- indeks.js
- o.js
- aricles.js
Ten plik zostanie automatycznie przekształcony na trzy sposoby:
- Strona indeksu localhost/index
- Strona z informacjami localhost/informacje
- Strona bloga localhost/artykuły
Poniżej pokazano przykład strony about.js. Nic nie jest podane na temat strony, jak widać. Jest to po prostu standardowy element funkcjonalny Reacta.
trasy
Aby tworzyć trasy zagnieżdżone, musisz najpierw utworzyć podfolder. Na przykład: strony/artykuły. Utwórz w tym folderze komponent React 'contact.js', który wygeneruje stronę localhost/articles/contact.
Jeśli umieścisz jeden plik w pages/articles.js, a drugi w pages/articles/index.js. Oba odzwierciedlają tę samą ścieżkę localhost/blog. W takiej sytuacji Next.js po prostu wyrenderuje plik article.js. A co z trasami dynamicznymi, w których każdy post na blogu ma swoją własną ścieżkę:
- localhost/blog/pierwszy-artykuł
- localhost/blog/-drugi-artykuł
Korzystając z notacji nawiasów, możesz zdefiniować trasę dynamiczną w Next.js. Na przykład: pages/artykuł/[slug].js
Połącz trasy
Właśnie ukończyłeś swoją pierwszą trasę. Domyślam się, że pytasz, jak połączyć strony z tymi trasami. Aby to zrobić, będziesz potrzebować „next/link”.
Oto przykład strony głównej zawierającej łącze do strony Informacje:
Jeśli chcesz nadać styl linkowi, użyj następującej składni:
Przekieruj trasy
Co zrobić, jeśli musisz wymusić przekierowanie na określoną stronę? Na przykład po naciśnięciu przycisku? Możesz to osiągnąć za pomocą „router.push”:
SEO
Strony w aplikacjach internetowych wymagają elementów meta (head) oprócz danych w treści HTML. Będzie to wymagało zainstalowania dodatkowego wymagania o nazwie React Helmet w aplikacji React.
Możemy użyć komponentu Head z next/head w Next, aby łatwo dodać metadane do naszych stron internetowych, które będą wyświetlane w wynikach wyszukiwania i osadzonych:
Podzespoly Komputerowe
Często będziesz musiał opracować komponenty lub plik układu. Na przykład komponent, który renderuje pasek nawigacyjny. Do tej pory używaliśmy tylko folderu stron. Co zrobić, jeśli Twój komponent nie ma być stroną trasy?
Nie chcesz, aby użytkownik przechodził do strony takiej jak localhost/pasek nawigacyjny. Jeśli umieścisz komponent Navbar.js w folderze stron, tak się stanie. Co powinieneś zrobić w tej sytuacji?
Po prostu przechowuj wszystkie komponenty „nie będące stroną” w osobnym folderze. Większość projektów Next.js używa monikera „komponenty”, a ten folder jest generowany w folderze głównym projektu.
Komponent głowy
Początkowe ładowanie strony jest renderowane przez Next.js po stronie serwera. Robi to, modyfikując kod HTML Twojej strony. Sekcja nagłówka jest uwzględniona.
Komponent Next.js Head służy do nadawania tagów sekcji nagłówka, takich jak tytuł i meta. Komponent Head jest używany w tym przykładzie komponentu Layout.
Nie znaleziono strony 404
Możliwe jest stworzenie własnej strony błędu 404. Możesz dostosować wiadomość lub dodać własny projekt strony. W folderze pages utwórz plik 404.js.
Gdy wystąpi błąd 404, Next.js automatycznie przekieruje na tę stronę. Oto przykład spersonalizowanej strony 404:
Pobieranie danych z serwera
Zamiast pobierać dane po stronie klienta, Next.js pozwala na wstępne wypełnienie danych, co oznacza wysłanie strony z danymi już wypełnionymi z serwera.
Masz dwie możliwości implementacji pobierania danych po stronie serwera:
- Dane powinny być pobierane na każde żądanie.
- Otrzymuj dane tylko raz w całym procesie budowy (strona statyczna)
Pobierz dane na każde żądanie
Metoda getServerSideProps służy do renderowania każdego żądania po stronie serwera. Ta funkcja może być dołączona na końcu pliku składowego. Next.js automatycznie wypełni właściwości komponentu obiektem getServerSideProps, jeśli ta funkcja jest obecna w pliku komponentu.
Pobierz dane w czasie kompilacji
Metoda getStaticProps służy do renderowania po stronie serwera w czasie kompilacji. Ta funkcja może być dołączona na końcu pliku składowego. Ta metoda uruchamia kod serwera i wysyła żądanie GET do serwera, ale tylko raz po zakończeniu naszego projektu.
Dlaczego powinieneś uczyć się Next.js?
Jednym z powodów jest to, że Next.js jest zbudowany na React, front-endowym zestawie narzędzi programistycznych dla tworzenie interfejsów użytkownika to mój ulubiony wybór do projektowania aplikacji internetowych.
Ale to nie wystarczyłoby, gdyby Next.js nie był dobry w tym, co robił… prawda?
Więc co to właściwie robi?
Aby to zrozumieć, musimy najpierw zdefiniować kilka pojęć. Next.js zyskał popularność, ponieważ rozwiązał problem wielu twórców stron internetowych z aplikacjami internetowymi po stronie klienta (w przeglądarce). Te aplikacje jednostronicowe (SPA) miały lepsze wrażenia, ponieważ nie wymagały ponownego ładowania strony przez użytkownika i pozwalały na większą interaktywność.
Ponieważ jednak większość materiałów w takiej aplikacji staje się widoczna tylko wtedy, gdy jest wykonywana w przeglądarce, roboty indeksujące mają trudności ze zrozumieniem treści tekstowej takiej aplikacji.
W rezultacie, pomimo swojej popularności, wiele SPA pozostało w dużej mierze anonimowych dla dużych wyszukiwarek, takich jak Google. Next.js zawiera teraz bardziej niezawodny wbudowany mechanizm renderowania po stronie serwera (SSR) komponentów React.
Next.js umożliwia programistom konstruowanie kodu JavaScript na serwerze podczas procesu budowania i dostarczanie użytkownikowi podstawowego, indeksowalnego kodu HTML.
ZALETY
- Świetne dla doświadczenia użytkownika
- Świetne dla SEO
- Zbuduj superszybką statyczną stronę internetową, która zachowuje się jak dynamiczna
- Elastyczność w budowaniu UI i UX.
- Wiele zalet rozwojowych
- Świetne wsparcie społeczności
Wady
- Strony internetowe lub aplikacje mają określoną ilość czasu na zbudowanie lub rozwinięcie.
- W przypadku niektórych zadań Next.js jest niewystarczający. Deweloperzy powinni mieć możliwość konstruowania dynamicznych tras za pomocą narzędzi Node.js.
Wnioski
Jak widać, Next.js upraszcza tworzenie aplikacji React i pozwala skupić się na tym, co najważniejsze – logice aplikacji i interfejsie użytkownika. Zawiera wszystko, co jest potrzebne do tworzenia nowoczesnych, bogatych w interfejsy i opartych na interfejsach API aplikacji.
Nadaje się również do projektów zawierających tylko zawartość, takich jak blogi i witryny biznesowe, ze względu na możliwość tworzenia statycznych stron HTML.
Dzięki obecnym wydaniom Next.js nie tylko utrzymuje wysoki poziom doświadczenia programisty, ale także zapewnia narzędzia do zwiększania wydajności wizualnej i doświadczenia użytkownika, zapewniając świetlaną przyszłość dla tego frameworka.
Dodaj komentarz