Twoja pierwsza aplikacja w Next.js

Next.js to świetny framework Reacta, który pomaga rozwiązywać problemy z renderowaniem po stronie serwera, renderowaniem wstępnym oraz z SEO. Używając Next.js, jesteś zawsze blisko Reacta.

Framework ten ma sporo wbudowanych klas, takich jak:

• Routing w oparciu o strony (ze wsparciem dla routingu niestandardowego)
• Renderowanie wstępne, z zarówno statyczną generacją, jak i renderowaniem po stronie serwera
• Routing po stronie klienta ze zoptymalizowanym prefetchingiem
• Wbudowana obsługa dla CSS i Sass
• Środowisko developerskie, które obsługuje przeładowanie kodu na żywo.

Next.js zaufało też wiele dużych firm na całym świecie. Co więcej, jeśli programowało się w React, to praca w Next.js nie będzie raczej trudna. Pokażę tutaj, jak stworzyć w tym frameworku prostą aplikację, włączając w to design i layout. Co więcej, pobierzemy informacje z API przy użyciu renderowania wstępnego.

Zaczynajmy!

Tworzymy katalog dla projektu

Tworzymy katalog dla naszego nowego projektu — nazwijmy go hello_next. Otwórz go na swoim IDE (ja będę używał VSCode). 

Uruchamiamy package.json

Otwórz terminal z katalogiem projektu i uruchom następującą komendę, która stworzy plik package.json. Będzie on zawierał zależności i skrypty naszego projektu. Dodanie -y do komendy wygeneruje plik package ze wszystkimi ustawieniami domyślnymi. 

npm init -y

React, React Dom oraz Next

Poniżej zobaczycie, jak zainstalować React, React Dom oraz Next:

npm install --save react react-dom next

Zmieniamy skrypty package.json

Dodaj następujące skrypty do odpowiedniej sekcji w package.json. Dzięki temu będzie można odpalić kod przy pomocy komendy npm run dev. 

//package.json
"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },

Routing

Router Next.js opiera się na systemie plików oraz jest zbudowany w oparciu o koncepcję stron. Musimy zatem stworzyć folder o nazwie pages, a nazwa pliku będzie taka sama, jak nazwa ścieżki. Dowiesz się więcej, gdy zaczniemy go używać. 

Stworzymy tutaj dwie strony — stronę główną i zakładkę „about”. Stwórzmy plik index.js wewnątrz katalogu pages i umieśćmy w nim jakiś prosty tekst na powitanie. 

//pages/index.js
const Index = () => {
    return (
            <div>
                <h1>Welcome to Next Application</h1>
            </div>
    );
}
export default Index;

A teraz stwórzmy plik about.js w tym samym folderze docelowym z następującym kodem:

//pages/about.js
const About = () => {
    return(
            <div>
                <h1>
                    About NextJS
                </h1>
                <p>Application to Demonstrate NextJS Basics</p>
            </div>
    );
}
export default About;

Jeśli nie uruchomiliście jeszcze projektu, to uruchomcie komendę npm run dev. Zobaczycie wtedy stronę główną, ponieważ index.js obierze ścieżkę ‘/’. A teraz dodajcie ‘/about’ do URL, aby przenieść się do zakładki about. Sekcjami nawigacyjnymi zajmiemy się później. 

Strona główna

Zakładka „about”

Komponenty

W Next.js tworzymy komponenty tak samo, jak w React. Stwórzmy zatem komponent Navbar oraz Layout, który będzie z kolei zawierał layout naszej prostej aplikacji demo. Najpierw stwórzmy komponent Navbar. Tworzymy najpierw folder o nazwie components w roocie naszego projektu. Wewnątrz folderu components tworzymy plik navbar.js, który zawiera menu nawigacyjne dla naszego projektu oraz bootstrap CDN dla lepszego designu. 

Co więcej, zaimplementujemy style jsx, aby zademonstrować, jak się ich używa w Next.js. Style te będą widoczne jedynie dla tego komponentu. 

//components/navbar.js
import Link from 'next/link';
const Navbar = () => {
    return(
        <div>
            <ul>
                <li><Link href="/"><a>Home</a></Link></li>
                <li><Link href="/about"><a>About</a></Link></li>
            </ul>
<style jsx>{`
                ul {
                    background: #333;
                    color: #fff;
                    list-style: none;
                    display: flex;
                }
ul li {
                    font-size: 22px;
                    margin-right: 50px;
                }
ul li a {
                    color: #fff;
                    text-decoration: none;
                }
            `}</style>
        </div>
    );
}
export default Navbar;

W powyższym kodzie możemy zobaczyć, jak wygląda nawigowanie między ścieżkami, gdy wykorzysta się next/link Teraz przechodzimy do layoutu naszego projektu. Tworzymy plik layout.js wewnątrz folderu components i używamy komponentu Navbar w Layouts. 

//components/layout.js
import Head from 'next/head';
import Navbar from './navbar';
const Layout = (props) => {
    return(
        <div>
            <Head>
                <title>Hello Next.js</title>
                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
            </Head>
            <Navbar />
            <div className="container">
                {props.children}
            </div>
        </div>
    );
}
export default Layout;

Zmodyfikujemy teraz nasz index.js oraz about.js, aby wykorzystać jakiś dostępny layout. Użyjemy tutaj bardzo ważnej funkcji Next.js, który nazywa się getInitialProps. Pozwala ona na renderowanie po stronie serwera na danej stronie oraz na uzupełnienie danych, by wysłać stronę już z danymi, które są dostępne na serwerze.

Przydaje się to przy SEO. Jest to funkcja asynchroniczna, którą można dodać do jakiejkolwiek strony jako metodę statyczną. Spójrzmy, jak pobierzemy i wyświetlimy dane dla sample music API. Dodamy również isomorphic-unfetch, aby pobrać dane z API. 

npm install --save isomorphic-unfetch

Po dodaniu powyższego zmodyfikujemy index.js. Pełny kod poniżej:

//pages/index.js
import Layout from '../components/layout';
import fetch from 'isomorphic-unfetch';
const Index = ({musicData}) => {
    console.log(musicData)
    return (
        <Layout>
            <div>
                <h1>Welcome to Next Application</h1>
                <h3>Songs List</h3>
                {musicData.map((item, i) => {
                   return (
                   <li key={i}>{item.title}</li>
                   )
               })}
            </div>
        </Layout>
    );
}
Index.getInitialProps = async function() {
    const response = await fetch(`https://www.what-song.com/api/recent-movies`);
    const result = await response.json();
    return { musicData: result.data }
}
export default Index;

Zmodyfikujemy też about.js. Pełny kod poniżej:

//pages/about.js
import Layout from '../components/layout';
const About = () => {
    return(
        <Layout>
            <div>
                <h1>
                    About NextJS
                </h1>
                <p>Application to Demonstrate NextJS Basics</p>
            </div>
        </Layout>
    );
}
export default About;

Demo

Nasza prosta aplikacja Next.js jest gotowa. Poniżej mamy gotową stronę, na której znalazły się dane pobrane z API:

Strona główna z listą piosenek 

Zakładka „about”

Mam nadzieję, że artykuł zademonstrował Wam podstawową wiedzę potrzebną do pracy z Next.js. Jeśli coś jest niejasne, zajrzycie do tego repozytorium.

Oryginał tekstu w języku angielskim przeczytasz tutaj.