This is a Next.js project bootstrapped with create-next-app.

npx create-next-app my-next-web --use-npm

Vytvoří se adresář my-next-web, ten si otevřete ve Visual Studio Code. Lokální vývojový server spustíte příkazem

npm run dev

Živý web pro vývoj běží v prohlížeči na adrese http://localhost:3000.

• pages – stránky webu, co soubor .js to jedna stránka.
• public – statické soubory, které se zkopírují do kořenového adresáře výsledného webu

Místo přípony .jsx se v Nextu používá jen .js. Soubory s proměnnou v hranatých závorkách (např. /produkt/[id].js) jsou šablony – podle tohoto souboru se může vygenerovat více stránek na základě pole – za [id] se postupně dosazují položky pole.

Příklad adresářové struktury a výsledných adres:

/index.js         → /
/kontakty.js      → /kontakty
/clanky/index.js  → /clanky
/clanky/o-nas.js  → /clanky/o-nas
/produkt/[id].js  → /produkt/jablko, /produkt/hruska, /produkt/vino…

const nactiData = () => {
  fetch("https://api.sunrise-sunset.org/json?lat=36.7201600&lng=-4.4203400")
    .then((resp) => resp.json())
    .then((json) => console.log(json));
};

Předchozí kód se dá zapsat také takto:

const nactiData = async () => {
  const resp = await fetch("https://api.sunrise-sunset.org/json?lat=36.7201600&lng=-4.4203400");
  const json = await resp.json();
  console.log(json);
};

export const getStaticProps = (context) => {
  return {
    props: {},
    revalidate: false,
    notFound: false,
    redirect: null,
  };
};

export const getStaticPaths = () => {
  return {
    paths: [
        { params: { … } },
        { params: { … } } //…
      ],
    fallback: false
  };
};

npm install remark remark-html gray-matter

V souboru package.json upravit scripts.build. Původní hodnota:

"build": "next build"

Po úpravě:

"build": "next build && next export"

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• Markdown Cheat Sheet - A quick reference to the Markdown syntax.