logo

Průvodce Začínáme s Next.js – Vytvořte aplikaci Next.js

Úvod

Next.js je open-source JavaScript framework vytvořený společností Vercel za účelem vylepšení aplikací React o funkce, jako je Server-Side Rendering a generování statického webu .

React se tradičně používá k vytváření jednostránkových aplikací (SPA) jehož obsah je vykreslován na straně klienta. Next.js to rozšiřuje tím, že umožňuje vývojářům vytvářet aplikace, které mohou provádět akce na straně serveru, předběžné načítání tras a mají podporu pro TypeScript. Navíc – ve výchozím nastavení nevyžaduje žádnou extra konfiguraci!

Poznámka: Úplný kód této aplikace lze nalézt na GitHubu.

Instalace a nastavení

Nejjednodušší způsob, jak vytvořit novou aplikaci Next.js, je pomocí create-next-app nástroj CLI. Můžete jej nainstalovat pomocí npm :

$ npm install create-next-app

Po instalaci můžete inicializovat novou aplikaci Next.js zavoláním nástroje a zadáním názvu projektu:

$ npx create-next-app weather-app

Poznámka: Pokud ještě nemáte create-next-app nainstalováno - npx vás vyzve k automatické instalaci.

Jakmile nástroj dokončí inicializaci projektu kostry, přesuňte se do adresáře a nahlédněte dovnitř:

$ cd weather-app
$ ls
README.md       node_modules/      package.json  public/
next.config.js  package-lock.json  pages/        styles/

Standardní package.json , package-lock.json a node_modules jsou tam, ale máme také /pages , /public a /styles adresáře a také next.config.js soubor!

Pojďme se podívat, co to je.

Funkce Next.js

Next.js je v konečném důsledku rozšíření pro React a přináší několik nových věcí, které usnadňují a urychlují vývoj aplikací React – počínaje stránkami Next.js .

Stránky

Next.js umožňuje vytvářet vícestránkové aplikace pomocí React směšně snadné díky jeho výchozímu směrovači založenému na souborovém systému . Nemusíte instalovat žádné další balíčky, jako je react-router-dom nebo vůbec nakonfigurovat router.

Všechny projekty Next.js obsahují výchozí /pages adresář, který je domovem všech komponent React, které budete používat. Pro každou komponentu – router obslouží stránku založenou na této komponentě.

Předpokládejme například, že vytvoříme komponentu contact.js , v rámci /pages adresář:

const Contact = () => {
    return (
        <div>
            Contact
        </div>
    )
}

export default Contact

Směrovač založený na souborovém systému, který Next.js používá, zpřístupní tuto stránku pod /contact trasa! Jedinou výjimkou z tohoto pravidla je index.js stránku, která se nenachází pod /index trasou, ale je poskytován na / .

Navíc můžete vnořovat trasy s Next.js, takže můžete snadno vytvořit /weather/berlin dynamicky vytvořením /weather složka a dynamická [city].js komponenta, která bude fungovat jako stránka.

Poznámka: U dynamických tras je třeba pojmenovat soubor v sadě hranatých závorek. Bez nich je to statický doslovný řetězec a jako takový bude analyzován. city.js by se vyřešilo na /weather/city trasu a nehodí se k ničemu jinému. Na druhou stranu [city.js] by odpovídalo /weather/berlin , /weather/london , /weather/lagos , atd.

Komponenta

<Link> komponentu lze použít k navigaci mezi stránkami ve vašich aplikacích. Za předpokladu, že struktura naší stránky projektu má několik stránek pod /pages adresář:

- pages
  - index.js
  - weather.js
  - contact.js

<Link> href komponenty Atribut lze použít k ukázání relativní cesty každé stránky počínaje /pages adresář:

import Link from "next/link";

export default function Home() {
  return (
    <div>
      <Link href="/">Home</Link>
      <Link href="/weather">Weather</Link>
      <Link href="/contact">Contact</Link>
    </div>
  )
}

Samozřejmě, pokud máte vnořenou hierarchii souborů, můžete také odkazovat na vnořené stránky:

- pages
  - weather
    - [city].js

import Link from "next/link";

export default function Weather() {
  return (
    <div>
      <Link href="/weather/berlin">Berlin</Link>
      <Link href="/weather/london">London</Link>
      <Link href="/weather/lagos">Lagos</Link>
    </div>
  )
}

<Link> komponenta může také předběžně načíst stránky! Jakmile je stránka načtena a existuje více odkazů na jiné stránky - pokud víte, že určitá stránka je často navštěvována, nebo se chcete ujistit, že se stránka načte co nejdříve (aniž by to ovlivnilo úvodní stránku ), můžete předem načíst stránku spojenou s <Link> aby byl přechod rychlejší a hladší!

Je například možné, že v aplikaci počasí lidé s větší pravděpodobností přejdou na /weather trasu z domovské stránky, nikoli /about . about.js není třeba předem načítat stránku/komponentu, protože u stránky, na kterou není příliš pravděpodobné, že na ni někdo klikne, byste server dále zatěžovali. Na druhou stranu - weather.js je s největší pravděpodobností další trasa, kterou lidé navštíví, takže si můžete přechod na nějaký čas zkrátit tím, že ji předem načtete:

import Link from "next/link";

export default function Home() {
  return (
    <div>
      <Link prefetch=true href="/weather">Weather</Link>
      <Link prefetch=false href="/about">About Us</Link>
    </div>
  )
}

Některé další atributy zahrnují scroll atribut (výchozí hodnota je true ), která uživatele při přesměrování pomocí <Link> přenese do horní části stránky . Toto je velmi rozumné výchozí nastavení, i když jej možná budete chtít vypnout, abyste dosáhli konkrétnějšího efektu.

Dalším atributem, který stojí za zmínku, je replace atribut, jehož výchozí hodnota je false . Pokud je nastaveno na true , při přechodu na novou stránku/trasu s <Link> nahradí nejnovější záznam v zásobníku historie místo toho, aby vložil nový. .

Předběžné vykreslování stránek

Když už mluvíme o předběžném načítání a předběžném vykreslování stránek – tato funkce Next.js je jednou z těch relevantnějších. Opět platí, že ve výchozím nastavení Next.js předem načte všechny stránky, na které odkazujete, což umožňuje plynulé a rychlé přechody mezi nimi.

Pro každou stránku si můžete vybrat mezi Server-Side Rendering nebo Statické generování a použitá technika závisí na funkcích, které používáte k načítání dat. Nejste nuceni dodržovat jednu z těchto technik po celou dobu aplikace!

Pokud své stránky vykreslíte na straně serveru, budou vykresleny při každém požadavku pomocí prostředků vašeho serveru a odeslány koncovému uživateli. Pokud stránku vygenerujete staticky, vygeneruje se jednou a po sestavení je znovu použitelná.

Poznámka: Obecně řečeno, budete chtít použít generování statické elektřiny vždy, když není potřeba používat Server-Side Rendering protože stránku lze uložit do mezipaměti a znovu použít, což ušetří cenné výpočty. Kdykoli jsou součásti na stránkách časté, Server-Side Rendering je vyžadováno a stránka se na požádání vykreslí s novými daty (z nichž některá mohou záviset na samotném požadavku).

Můžete se také rozhodnout nechat některé stránky nebo prvky na stránce vykreslit pomocí vykreslování na straně klienta což zatěžuje počítač koncového uživatele, ale nemáte žádné záruky ani kontrolu nad jeho zdroji, takže se obvykle chcete vyhnout jakémukoli intenzivnímu výpočtu na jeho konci.

Jak to ovlivní koncového uživatele a jak to vylepší jednoduchou aplikaci React? Předběžné vykreslování umožňuje uživateli zobrazit stránku ještě před načtením jakéhokoli kódu JavaScript. Načtení JavaScriptu trvá opravdu krátkou dobu – ale tyto milisekundy neúmyslně ovlivňují naše vnímání. I když je stránka zobrazena tak, jak ji uvidí uživatel po načtení všech komponent – ​​žádná z nich zatím nefunguje.

Teprve po zobrazení stránky se komponenty zpracovávají a načítají, aby se staly interaktivními komponentami. Tento proces se nazýváhydratace .

Bez Next.js by byla stránka při načítání JavaScriptu a inicializaci komponent prázdná.

Protože předběžné vykreslování je nedílnou součástí část Next.js, podíváme se na některé funkce, které můžete použít k usnadnění předběžného vykreslování, a to jak prostřednictvím SSR a SG .

Načítání dat na straně serveru – getServerSideProps()

getServerSideProps() Funkce se používá k provádění operací souvisejících se serverem, jako je načítání dat z externího rozhraní API. Opět chcete provést SSR vždy, když se data na stránce rychle mění, a nemělo by smysl je ukládat do mezipaměti. Rozhraní API může například reagovat s aktualizovanými cenami akcií nebo časem na hodinách každou sekundu a na každý požadavek uživatele – ty by měly být aktuální.

Zde je příklad, který odešle požadavek na vzorové rozhraní API a předá data přijatá jako podpěra naší komponentě stránky:

const Weather = ({temperature}) => {
// display temperature

}
export default Weather

export async function getServerSideProps() {
  const res = fetch('http://example.com/api')
  ...
  const temperature = res.temperature
  return {
    props: {temperature},
  }
}

getServerSideProps() obdrží context objekt, který obsahuje informace související se serverem, jako jsou příchozí požadavky, odpovědi serveru, dotazy. To je zásadní, protože samotné vykreslování může záviset na context .

Cesty statického generování – getStaticPaths()

Používáme getStaticPaths() funkce k definování seznamu cest, které by měly být staticky generovány pro dynamickou trasu. Řekněme, že máme dynamickou trasu pages/weather/[city].js a exportujeme getStaticPaths() funkce v tomto souboru jako níže:

export async function getStaticPaths() {
  return {
    paths: [{ params: { id: 'paris' } }, { params: { id: 'london' } }],
  };
}

Next.js automaticky staticky vygeneruje /weather/paris a /weather/london pro nás v době výstavby.

Rekvizity statického generování – getStaticProps()

getStaticProps() funkce je podobná getServerSideProps() v tom smyslu, že jej používáme k načítání rekvizit na předrenderovanou stránku. V tomto případě jsou však rekvizity staticky generovány v době sestavování a jsou znovu použity pro všechny požadavky později, místo aby byly vykreslovány v době žádosti:

export async function getStaticProps() {

  const res = await fetch('http://someapi/toget/cities')
  ...
  const cities = await res.json()
  return {
    props: {
      cities,
    },
  }
}

Poznámka: getStaticPaths() nebude fungovat s getServerSideProps() - místo toho použijte getStaticProps() . Tuto funkci je nejlepší používat pouze tehdy, když se data, která mají být předem vykreslena, načítají rychle nebo je lze veřejně uložit do mezipaměti.

&SEO

Od Jednostránkových aplikací je obtížné procházet vyhledávači, optimalizace aplikací React pro vyhledávače může být obtížná. Zatímco vykreslování Next.js na straně serveru to řeší, rámec také obsahuje speciální <Head /> komponenta, která usnadňuje přidávání prvků do záhlaví vaší stránky.

Výsledkem je aktualizace nastavení SEO vašich stránek aplikace, jako je značka title, meta-description a jakýkoli jiný prvek, který byste zahrnuli do standardního HTML <head> tag je jednodušší:

import Head from "next/head";

const Contact = () => {
  return (
    <div>
      <Head>
        <title>Contact</title>
        <meta name="description" content="Welcome to our contact page!"/>
      </Head>
    </div>
  );
};

export default Contact;

Vytváření tras API pomocí Next.js

Next.js také nabízí funkci pro vývoj vlastního API přímo ve vašem projektu a proces je podobný jako při vytváření stránek! Chcete-li začít, budete muset vytvořit nový api podadresář pod /pages (tj. /pages/api ) a jakýkoli soubor v tomto adresáři bude směrován na /api/* .

Aby tyto koncové body fungovaly, musíte exportovat výchozí handler() funkce (obslužný program požadavku) pro každý koncový bod, který přijímá dva parametry:req (příchozí požadavek) a res (odpověď serveru).

Chcete-li to vyzkoušet, aktualizujte naše /pages/api/weather.js příklad s následujícím obsahem:

export default function handler(req, res) {
  res.status(200)
  res.json({
    city: 'London',
    temperature: '20',
    description: 'sunny',
  });
}

Pokud navštívíme nebo pošleme žádost na /api/weather , měli bychom vidět falešné informace o počasí pro Londýn a také 200 kód odpovědi.

Statická aktiva

V určitém okamžiku budete pravděpodobně chtít načíst položky, jako jsou obrázky, videa, písma a tak dále. Všechny projekty Next.js mají adresář s názvem /public pro tento účel.

Například pokud máme soubor pod /public/weather-icon.svg , můžeme k němu přistupovat v jakékoli komponentě pomocí:

const WeatherIcon = () => {
  return <img src="/weather-icon.svg" alt="Weather Icon"/>
}

export default WeatherIcon

Proměnné prostředí Next.js

Proměnné prostředí jsou proměnné, jejichž hodnoty jsou nastaveny mimo naši aplikaci a většinou je používáme k uchovávání citlivých dat, jako jsou klíče API nebo konfigurace serveru, abychom se vyhnuli jejich předávání nástrojům pro správu verzí, jako je Github, GitLab atd.

Next.js poskytuje podporu pro práci s proměnnými prostředí prostřednictvím .env.local soubor. Všechny proměnné v tomto souboru jsou mapovány na process.env .

Pokud máme .env.local soubor s následujícími proměnnými:

WEATHER_API_KEY=abcd123
CITY_API_KEY=123abc

Nyní k nim máme přístup přes process.env.WEATHER_API_KEY a process.env.CITY_API_KEY .

Zdarma e-kniha:Git Essentials

Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!

Proměnné prostředí také nejsou ve výchozím nastavení vystaveny v prohlížeči a jsou přístupné pouze v prostředí Node.js (na straně serveru). Můžeme se však rozhodnout, že je zpřístupníme na straně klienta přidáním předpony preferované proměnné NEXT_PUBLIC_ . Například, pokud máme proměnnou:

NEXT_PUBLIC_CITY_API_KEY=123abc

K této proměnné lze nyní přistupovat kdekoli v naší aplikaci prostřednictvím process.env.NEXT_PUBLIC_CITY_API_KEY .

Vytvoření aplikace Počasí pomocí Next.js

Vytvoříme aplikaci počasí, která zjistí město uživatele a na základě těchto informací zobrazí informace o počasí. Kromě toho zavedeme funkci, která uživatelům umožní kdykoli uložit konkrétní informace o počasí a později k nim přistupovat.

Aplikace bude vypadat nějak takto:

Pokud jste to ještě neudělali, vytvořte novou aplikaci Next.js pomocí příkazu níže:

$ npx create-next-app weather-app

A naši aplikaci můžeme spustit pomocí:

$ npm run dev

Kvůli jednoduchosti a stručnosti budeme k nastavení rozhraní naší aplikace místo psaní vlastních CSS používat Bootstrap. Bootstrap můžete nainstalovat pomocí příkazu níže:

$ npm install bootstrap

Po dokončení instalace otevřeme pages/_app.js a zahrnout záznam pro Bootstrap:

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

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Poznámka: _app.js soubor je výchozí aplikace komponenta, kterou Next.js používá k inicializaci stránek. Slouží jako výchozí bod pro všechny součásti vaší stránky.

Nyní můžeme naši aplikaci učinit vizuálně přitažlivější změnou výchozího písma a přidáním pěkné barvy pozadí. Otevřeme styles/global.css a proveďte následující změny:

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:[email protected];200;300;400;500;800;900&display=swap');

body {
  background: #4F32FF;
  color: #fff;
  font-family: 'Be Vietnam Pro', sans-serif;
}

To je víc než dost na to, abyste mohli začít! Pojďme definovat strukturu našich stránek a zástupné symboly pro data, když se načítají přes rozhraní API.

Značky stránky

Pro náš front-end otevřeme pages/index.js a definovat značku (strukturu) naší domovské stránky:

import Link from "next/link";

export default function Home() {
  return (
    <div>
      <div
        className="d-flex justify-content-center align-items-center"
        style={{ minHeight: "100vh" }}
      >
        <div>
          <div>
            <h1 className="fw-bolder" style={{ fontSize: "60px" }}>
              Null City.
            </h1>
            13 January, 2022
          </div>
          <div className="d-flex justify-content-between align-items-center mt-4">
            <div className="pe-5">
              <h2 className="d-inline">0</h2>
              <sup>°C</sup>
              <p className="text-info">Cloudy</p>
            </div>
            <div>
              <img src="/1.png" alt="" width={100} draggable="false" />
            </div>
          </div>
          <hr />
          <div className="d-md-flex justify-content-between align-items-center mt-4">
            <button className="btn btn-success border-0 save-btn px-4 py-3">
             Timestamp
            </button>
            <Link href="/history">
              <button className="btn btn-danger border-0 history-btn px-4 py-3 ms-auto">
                My History
              </button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}

Poznámka: Budete si muset stáhnout ikonu počasí z našeho GitHubu a zahrnout ji do svého projektu /public složka.

A v tomto okamžiku, pokud si prohlédneme naši aplikaci v prohlížeči, měli bychom vidět následující výstup s fiktivními daty:

Získání informací o počasí

K získání aktuálních informací o počasí uživatele použijeme bezplatné rozhraní API o počasí, ale protože chceme zobrazit informace o počasí pro město, ve kterém se uživatel právě nachází, budeme muset použít jiné rozhraní API, abychom získali aktuální město uživatele a předali toto parametr do rozhraní API počasí, abyste získali požadované informace.

Obrázek níže popisuje tento proces

K získání informací o počasí využijeme OpenWeather API , a přestože poskytují bezplatný plán, budete si muset vytvořit účet, abyste získali klíč API.

A k načtení města uživatele využijeme bezplatné IP Geolocation API který k použití nevyžaduje klíč API.

Také se chceme ujistit, že se informace o počasí zobrazí ihned po načtení stránky, takže Next.js getServerSideProps() tady se hodí!

Nyní přidejte následující exporty do index.js k provedení všech výše uvedených funkcí:

export async function getServerSideProps() {
  const ipRequest = await fetch(`http://ip-api.com/json/`);
  const ipData = await ipRequest.json();
  const city = ipData.regionName;

  const api_key = 'YOUR_OPEN-WEATHER_API_KEY';
  const url = `http://api.openweathermap.org/data/2.5/weather?q=${city},&appid=${api_key}&units=metric`;
  const weatherRequest = await fetch(url);
  const weatherInfo = await weatherRequest.json();

  console.log(weatherInfo);
  return { props: { weatherInfo, city } };
}

Výše uvedený kód provádí dvě asynchronní operace:

  • První je načíst město uživatele, které ukládáme do proměnné city .
  • Druhou možností je odeslat požadavek do rozhraní API počasí.

A nakonec jsme předali výsledek vrácený z meteorologického API a také město jako rekvizitu na naši indexovou stránku.

Poznámka: Budete muset nahradit YOUR_OPEN-WEATHER_API_KEY s vaším vlastním klíčem OpenWeather API.

Požadované informace jsou nyní uloženy jako podpora pro naši stránku indexu v weatherInfo a city a můžeme k nim přistupovat prostřednictvím:

...
export default function Home({ weatherInfo, city }) {
...
}

Pokud se pokusíte přihlásit weatherInfo do konzole si všimnete, že se vrací mnoho informací, včetně souřadnic uživatele a některých dalších informací, které naše aplikace nevyžaduje. Podle návrhu naší aplikace budeme potřebovat pouze následující údaje:

  • Město uživatele
  • Aktuální teplota
  • Popis počasí (např. zataženo, slabý déšť, sníh atd.)

Nakonec ikona počasí podle aktuální teploty. Aktuální teplota je vrácena na weatherInfo.main.temp a popis počasí na weatherInfo.weather[0].description .

Pojďme tedy do toho a nahraďte fiktivní data v našem značení těmito informacemi:

{/* ... */}
<div>
  <h1 className="fw-bolder" style={{fontsize: "60px"}}>
    {city}
  </h1>
  13 January, 2022
</div>
<div className="d-flex justify-content-between align-items-center mt-4">
  <div className="pe-5">
    <h2 className="d-inline">
        {Math.round(weatherInfo.main.temp)}</h2>
    <sup>°C</sup>
    <p className="text-info text-capitalize">
        {weatherInfo.weather[0].description}
    </p>
  </div>
  <div><img src='/1.png' alt="" width={100} draggable="false" /></div>
</div>
{/* ... */}

Můžeme také použít OpenWeather API k získání ikony počasí v závislosti na aktuální teplotě pouhým předáním názvu ikony jako parametru a naštěstí je to také dostupné na $weatherInfo.weather[0].icon .

Pojďme tedy do toho a nahraďte <img> ikony tag s kódem níže:

{/* ... */}
<img
  src={`http://openweathermap.org/img/wn/${weatherInfo.weather[0].icon}@2x.png`}
/>
{/* ... */}

A naše aplikace by měla být plně funkční a zobrazovat aktuální informace o počasí podle města, ve kterém se právě nacházíme:

Ukládání dat lokálně

Nyní vytvoříme funkci, která uloží aktuální informace o počasí a také datum a čas, kdy byly uloženy do localStorage prohlížeče. . Každý záznam bude uložen jako objekt s následující strukturou:

{
  date: 'Current Date',
  time: 'Current Time',
  city: 'User\'s City',
  temperature: 'User\'s city temperature',
  description: 'Weather Description',
};

Chcete-li to provést, vytvořte novou funkci saveWeather() (stále v našem index.js soubor) s následujícím kódem:

  const saveWeather = () => {
    const date = new Date();

    let data = {
      date: `${date.getDate()} ${date.getMonth() + 1} ${date.getFullYear()}`,
      time: date.toLocaleTimeString(),
      city: city,
      temperature: weatherInfo.main.temp,
      description: weatherInfo.weather[0].description,
    };

    let previousData = localStorage.getItem('weatherHistory');
    previousData = JSON.parse(previousData);
    if (previousData === null) {
      previousData = [];
    }
    previousData.push(data);
    localStorage.setItem('weatherHistory', JSON.stringify(previousData));
    alert('Weather saved successfully');
  };

Výše uvedený kód analyzuje všechna data dříve uložená v localStorage.weatherHistory jako JSON a v závislosti na typu vrácených dat jsme naši novou položku vložili do pole, převedli toto pole na řetězec a obnovili jej v localStorage.weatherHistory . Musíme to udělat, protože localStorage může ukládat pouze řetězce a ne žádné jiné datové typy.

A samozřejmě chceme tuto funkci volat, když uživatel klikne na Časové razítko tak přidáme onClick atribut k tlačítku:

<button onClick={saveWeather}>Timestamp</button>

Stránka Historie počasí

Nakonec budeme muset vytvořit vyhrazenou stránku pro přístup ke všem informacím o počasí, které jsou uloženy v localStorage našeho prohlížeče .

Poznámka: Nebudeme moci používat funkce načítání dat Next.js, protože localStorage nebo jakýkoli jiný objekt dokumentu není na serveru dostupný, proto se budeme muset spolehnout na načítání dat na straně klienta.

Vytvořte nový history.js soubor pod pages adresář s následujícím obsahem:

import { useState, useEffect } from "react";

const History = ({}) => {
  const [weatherHistory, setweatherHistory] = useState([]);


  useEffect(() => {
    setweatherHistory(
      localStorage.weatherHistory !== undefined
        ? JSON.parse(localStorage.weatherHistory)
        : []
    );
  }, []);

  return (
    <div
      className="d-flex justify-content-center align-items-center p-3"
      style={{ minHeight: "100vh" }}
    >
      <div>
        {" "}
        <h2>My Weather History</h2>
        <div className="mt-5">
          {weatherHistory.length > 0 ? (
            weatherHistory.map((weather, index) => {
              return (
                <div
                  key={index}
                  className="card mb-3"
                  style={{ width: "450px" }}
                >
                  <div className="card-body text-dark">
                    <h5 className="card-title ">
                      {weather.city} - {weather.date}
                    </h5>
                    <small>{weather.time}</small>
                    <hr />
                    <p className="card-text">
                      <span className="font-weight-bold">Temperature: </span>
                      {weather.temperature}
                      <sup>°C</sup>
                    </p>
                    <p className="card-text">
                      <span className="font-weight-bold">Condition: </span>
                      {weather.description}
                    </p>
                  </div>
                </div>
              );
            })
          ) : (
            <p>Nothing to see here - yet</p>
          )}
        </div>
      </div>
    </div>
  );
};

export default History;

Výše uvedený kód kontroluje, zda localStorage.weatherHistory existuje, pokud ano - analyzujeme data a nastavíme je na novou proměnnou weatherHistory . Pokud tomu tak není, nastavili jsme tuto proměnnou na prázdné pole.

V našem označení zkontrolujeme, zda je v našem weatherHistory alespoň jedna datová položka pole a pomocí JavaScriptu .map() iterujeme všechny položky v weatherHistory , které je zobrazíme na naší webové stránce.

Pokračujme a klikněte na Časové razítko tlačítko na stránce indexu pro zaznamenání aktuálních informací o počasí, a když se vrátíte na stránku historie, měli byste vidět něco takového:

Závěr

Next.js je JavaScript framework navržený speciálně pro vylepšení a podporu vývoje výkonných aplikací React.

V této příručce jsme prošli příslušnými funkcemi knihovny – jak jsou stránky vytvářeny a směrovány pomocí systému směrování souborů Next.js , jak <Link> komponenta funguje, co je předběžné načítání a předběžné vykreslování a jak je využít ke zlepšení uživatelského zážitku, jak lze snadno vytvářet trasy API a obslužné rutiny požadavků a jak pracovat s proměnnými prostředí.

Aby toho nebylo málo – vytvořili jsme aplikaci pro počasí, která komunikuje s externími rozhraními API, aby načetla data a zobrazila je koncovému uživateli, což jim umožňuje uložit jakékoli dané časové razítko do místního úložiště.

Opět je úplný zdrojový kód aplikace dostupný na GitHubu.