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.