← Cloudflare Pages / pages / framework-guides / nextjs

Statický web

Next.js ↗ je open-source framework React pro tvorbu webů a aplikací. V tomto návodu vytvoříte statickou aplikaci Next.js a nasadíte ji pomocí Cloudflare Pages.

Tento průvodce vás naučí, jak nasadit statický web z projektu Next.js pomocí statické exporty ↗.

Než budete pokračovat

Všechny průvodce frameworky předpokládají, že již máte základní znalosti Git ↗. Pokud s Gitem začínáte, podívejte se na tento shrnutá příručka ke Gitu ↗ jak nastavit Git na svém lokálním počítači.

Pokud klonujete přes SSH, musíte vygenerujte SSH klíče ↗ na každém počítači, který používáte pro push nebo pull z GitHubu.

Viz dokumentace GitHub ↗ a Dokumentace Git ↗ s dalšími informacemi.

Vyberte svůj projekt Next.js

Pokud již máte projekt Next.js, který chcete nasadit, ujistěte se, že je nakonfigurováno pro statické exporty ↗, přejděte do jejího adresáře a pokračujte dalším krokem. Jinak použijte create-next-app k vytvoření nového projektu Next.js.

npx create-next-app --example with-static-export my-app

Po vytvoření projektu se vygeneruje nový my-app adresář bude vygenerován pomocí oficiálního with-static-export ↗ jako šablonu. Pro pokračování přejděte do tohoto adresáře.

cd my-app

Vytvořte repozitář GitHub

Vytvořte nový repozitář GitHub na repo.new ↗. Po vytvoření nového repozitáře v terminálu spusťte následující příkazy, kterými připravíte a odešlete svou místní aplikaci na GitHub:

git remote add origin https://github.com/<GH_USERNAME>/<REPOSITORY_NAME>.git
git branch -M main
git push -u origin main

Nasaďte svou aplikaci na Cloudflare Pages

Chcete-li nasadit svůj web do Pages:

V dashboardu Cloudflare přejděte na Workers & Pages stránce.
Přejděte na Workers & Pages ↗
Vyberte Vytvoření aplikace.
Vyberte Pages kartě.
Vyberte Importujte existující repozitář Git.
Vyberte nově vytvořený repozitář GitHub a poté vyberte Zahájit nastavení.
V Nastavení sestavení sekci vyberte Next.js (statický export HTML) jako Přednastavení frameworku. Váš výběr poskytne následující informace:

Konfigurační možnost	Hodnota
Produkční větev	`main`
Příkaz sestavení	`npx next build`
Adresář sestavení	`out`

Po nakonfigurování webu můžete spustit první nasazení. Cloudflare Pages nainstaluje next, závislosti projektu a sestaví web, než ho nasadí.

Zobrazte si náhled svého webu

Po nasazení webu získáte pro svůj projekt jedinečnou subdoménu na *.pages.dev.

Pokaždé, když do svého webu Next.js odešlete commit s novým kódem, Cloudflare Pages automaticky znovu sestaví a nasadí váš projekt. Získáte také přístup k náhledová nasazení u nových pull requestů, takže si můžete prohlédnout, jak změny na vašem webu vypadají, než je nasadíte do produkce.

Kompletní návod k nasazení vašeho prvního webu na Cloudflare Pages najdete v Úvodní návod.