Ahoj, já jsem Hiro.
Jsem studentem webového vývoje ve Vancouveru.
Víte, co je Next.js?
To má dobré vlastnosti pro vývoj front-endu.
Rád bych vám ukázal základní rysy této dobré technologie.
Ale než to vysvětlím, rád bych vám ukázal, co je response.js.
To je rámec JavaScriptu, který nám umožňuje snadno vytvořit jednostránkovou aplikaci (SPA). SPA má pouze jednu stránku v souboru aplikace a připojuje se k backend serveru prostřednictvím datového formátu JSON. React získá data a vykreslí je do HTML dom. Pokud ji použijete, můžete vytvořit aplikaci volné spojky, která se snadno udržuje.
Tento rámec má však problém se SEO.
Aplikace vytvořená systémem Reag má pouze jeden html soubor a jednoduchý html dom. Pokud například vytvoříte aplikaci pomocí Create React App (CRA), kterou poskytuje Facebook, můžete vidět jednoduchý html dom jako tento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
To zahrnuje jednu jednoduchou značku div.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
Další html doms jsou vytvořeny komponentami reakce nazývanými JSX. To znamená, že náš prohlížeč vytváří html doms pomocí JavaScriptu.
To je dobré, ale pokud jde o SEO, tato funkce způsobuje problém, že Google Crawler nerozumí obsahu webové stránky.
S aplikací Business nebo Administrator není problém, protože tyto webové aplikace nejsou pro SEO důležité. Pokud však chcete vylepšit svou aplikaci, musíte vymyslet řešení, jak zobrazit obsah našich webových stránek prohledávači Google.
Máme však jednoduché řešení. Next.js tento problém řeší. Toto je rámec React.js a má některé funkce, které nám umožňují snadněji vytvářet SPA aplikaci s dobrým SEO.
Když se seznámíte s tímto rámcem, uvidíte slova jako SSR nebo SSG. Tyto funkce představují velké rozdíly mezi React.js a Next.js.
V tomto článku bych vám tedy rád ukázal, co je Next.js.
Vytvořit aplikaci Next.js
Nejprve můžete ve svém terminálu spustit příkaz k vytvoření aplikace inital next.js po přesunutí pracovního adresáře.
npx create-next-app <Your Project Name>
Pokud chcete použít npm, můžete použít níže.
npx create-next-app <Your Project Name> --use-npm
Oficiální dokument si samozřejmě můžete prohlédnout níže. Toto je užitečný dokument, abyste tomu porozuměli.
Po vytvoření počáteční aplikace můžete spustit vývojový server.
npm run dev
Pokud příkaz uspějete, můžete vidět počáteční aplikaci Next.js takto.
Směrování Next.js
Pokud jde o směrování, Next.js je jednodušší než React.js. React potřebuje importovat některé moduly, jako je BrowserRouter, Switch, Route a Link z React-router-dom. Ale importujete pouze Link from next/link a nový soubor vytvoříte ve složce pages vytvořené next.js, pokud chcete v aplikaci nastavit směrování.
Chci ukázat jednoduchý příklad. Vytvořte prosím nový soubor s názvem blog.js ve složce stránek.
import React from "react";
import Link from "next/link";
const Blog = () => {
return (
<div>
<h2>Blog Page</h2>
</div>
);
};
export default Blog;
A prosím upravte soubor index.js ve složce stránek, jak je uvedeno níže. Pouze přidám odkaz na soubor pro přesun na stránku blogu.
import Head from "next/head";
import Link from "next/link";
import styles from "../styles/Home.module.css";
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
<Link href="/blog">
<a>Move to Blog</a>
</Link>
</h1>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{" "}
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
</a>
</footer>
</div>
);
}
Po kliknutí na odkaz se přesuňte na stránku blogu. A je to. Je to velmi snadné a jednoduché😺
Generování statického webu (SSG)
V této aplikaci Next.js provádí vykreslování html na straně serveru. Díky této funkci je možné rychle reagovat na data uživatelům a všímat si obsahu webových stránek prohledávači Google. To jsou lepší věci než reagovat.
React je vykreslování na straně klienta. Znamená to, že webová stránka nefunguje správně, pokud ve svém prohlížeči zakážete JavaScript. Toto je jednoduchý příklad.
Je to jako funkce vykreslování na straně klienta.
Co takhle generování statického webu?
SSG vytvoří soubor html při vytváření zdrojového kódu.
Ukazuji také jednoduchý příklad o funkčnosti SSG.
npm run build
Po dokončení uvidíte složku .next. Tato složka je vytvořena příkazem a můžete vidět html soubor, který již byl vytvořen. A poté proveďte následující příkaz.
npm start
můžete zobrazit webovou stránku a vypnout JavaScript. Ale můžeme vidět veškerý obsah jako níže.
Next.js tedy nevytváří html soubor na straně klienta.
Dále můžeme zkontrolovat postavenou složku. Prohledávač Google ve skutečnosti vidí obsah html této sestavené složky.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="utf-8" />
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
<meta name="next-head-count" content="4" />
<link
rel="preload"
href="/_next/static/css/381f5b9c92d1673af027.css"
as="style"
/>
<link
rel="stylesheet"
href="/_next/static/css/381f5b9c92d1673af027.css"
data-n-g=""
/>
<link
rel="preload"
href="/_next/static/css/9c4381274c2a4fd9d205.css"
as="style"
/>
<link
rel="stylesheet"
href="/_next/static/css/9c4381274c2a4fd9d205.css"
data-n-p=""
/>
<noscript data-n-css=""></noscript>
<link
rel="preload"
href="/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/framework.1cddd991bfe63666dc71.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/commons.aab7fb15a9beb752d70d.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/main-9a218112b2a04fa38bab.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/pages/_app-56fe20dd7df999edbcbd.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/pages/index-74d863034f308fe688d0.js"
as="script"
/>
</head>
<body>
<div id="__next">
<div class="Home_container__1EcsU">
<main class="Home_main__1x8gC">
<h1 class="Home_title__3DjR7"><a href="/blog">Move to Blog</a></h1>
</main>
<footer class="Home_footer__1WdhD">
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>Powered by<!-- -->
<img src="/vercel.svg" alt="Vercel Logo" class="Home_logo__1YbrH"
/></a>
</footer>
</div>
</div>
<script id="__NEXT_DATA__" type="application/json">
{
"props": { "pageProps": {} },
"page": "/",
"query": {},
"buildId": "vAlb756HaKNXTe9J5pPd6",
"nextExport": true,
"autoExport": true,
"isFallback": false
}
</script>
<script
nomodule=""
src="/_next/static/chunks/polyfills-4f14e8c8ea1352d3ef0d.js"
></script>
<script
src="/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js"
async=""
></script>
<script
src="/_next/static/chunks/framework.1cddd991bfe63666dc71.js"
async=""
></script>
<script
src="/_next/static/chunks/commons.aab7fb15a9beb752d70d.js"
async=""
></script>
<script
src="/_next/static/chunks/main-9a218112b2a04fa38bab.js"
async=""
></script>
<script
src="/_next/static/chunks/pages/_app-56fe20dd7df999edbcbd.js"
async=""
></script>
<script
src="/_next/static/chunks/pages/index-74d863034f308fe688d0.js"
async=""
></script>
<script
src="/_next/static/vAlb756HaKNXTe9J5pPd6/_buildManifest.js"
async=""
></script>
<script
src="/_next/static/vAlb756HaKNXTe9J5pPd6/_ssgManifest.js"
async=""
></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<title>React App</title>
<link href="/static/css/main.9d5b29c0.chunk.css" rel="stylesheet" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>
!(function (e) {
function r(r) {
for (
var n, a, i = r[0], c = r[1], l = r[2], s = 0, p = [];
s < i.length;
s++
)
(a = i[s]),
Object.prototype.hasOwnProperty.call(o, a) &&
o[a] &&
p.push(o[a][0]),
(o[a] = 0);
for (n in c)
Object.prototype.hasOwnProperty.call(c, n) && (e[n] = c[n]);
for (f && f(r); p.length; ) p.shift()();
return u.push.apply(u, l || []), t();
}
function t() {
for (var e, r = 0; r < u.length; r++) {
for (var t = u[r], n = !0, i = 1; i < t.length; i++) {
var c = t[i];
0 !== o[c] && (n = !1);
}
n && (u.splice(r--, 1), (e = a((a.s = t[0]))));
}
return e;
}
var n = {},
o = { 1: 0 },
u = [];
function a(r) {
if (n[r]) return n[r].exports;
var t = (n[r] = { i: r, l: !1, exports: {} });
return e[r].call(t.exports, t, t.exports, a), (t.l = !0), t.exports;
}
(a.e = function (e) {
var r = [],
t = o[e];
if (0 !== t)
if (t) r.push(t[2]);
else {
var n = new Promise(function (r, n) {
t = o[e] = [r, n];
});
r.push((t[2] = n));
var u,
i = document.createElement("script");
(i.charset = "utf-8"),
(i.timeout = 120),
a.nc && i.setAttribute("nonce", a.nc),
(i.src = (function (e) {
return (
a.p +
"static/js/" +
({}[e] || e) +
"." +
{ 3: "b7dd6f7e" }[e] +
".chunk.js"
);
})(e));
var c = new Error();
u = function (r) {
(i.onerror = i.onload = null), clearTimeout(l);
var t = o[e];
if (0 !== t) {
if (t) {
var n = r && ("load" === r.type ? "missing" : r.type),
u = r && r.target && r.target.src;
(c.message =
"Loading chunk " +
e +
" failed.\n(" +
n +
": " +
u +
")"),
(c.name = "ChunkLoadError"),
(c.type = n),
(c.request = u),
t[1](c);
}
o[e] = void 0;
}
};
var l = setTimeout(function () {
u({ type: "timeout", target: i });
}, 12e4);
(i.onerror = i.onload = u), document.head.appendChild(i);
}
return Promise.all(r);
}),
(a.m = e),
(a.c = n),
(a.d = function (e, r, t) {
a.o(e, r) ||
Object.defineProperty(e, r, { enumerable: !0, get: t });
}),
(a.r = function (e) {
"undefined" != typeof Symbol &&
Symbol.toStringTag &&
Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),
Object.defineProperty(e, "__esModule", { value: !0 });
}),
(a.t = function (e, r) {
if ((1 & r && (e = a(e)), 8 & r)) return e;
if (4 & r && "object" == typeof e && e && e.__esModule) return e;
var t = Object.create(null);
if (
(a.r(t),
Object.defineProperty(t, "default", { enumerable: !0, value: e }),
2 & r && "string" != typeof e)
)
for (var n in e)
a.d(
t,
n,
function (r) {
return e[r];
}.bind(null, n)
);
return t;
}),
(a.n = function (e) {
var r =
e && e.__esModule
? function () {
return e.default;
}
: function () {
return e;
};
return a.d(r, "a", r), r;
}),
(a.o = function (e, r) {
return Object.prototype.hasOwnProperty.call(e, r);
}),
(a.p = "/"),
(a.oe = function (e) {
throw (console.error(e), e);
});
var i = (this.webpackJsonpreactjs = this.webpackJsonpreactjs || []),
c = i.push.bind(i);
(i.push = r), (i = i.slice());
for (var l = 0; l < i.length; l++) r(i[l]);
var f = c;
t();
})([]);
</script>
<script src="/static/js/2.542171dc.chunk.js"></script>
<script src="/static/js/main.f01f29a2.chunk.js"></script>
</body>
</html>
Chci vyzvednout značku uvnitř těla, protože jsem ji snadno viděl.
<body>
<div id="__next">
<div class="Home_container__1EcsU">
<main class="Home_main__1x8gC">
<h1 class="Home_title__3DjR7"><a href="/blog">Move to Blog</a></h1>
</main>
<footer class="Home_footer__1WdhD">
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>Powered by<!-- -->
<img src="/vercel.svg" alt="Vercel Logo" class="Home_logo__1YbrH"
/></a>
</footer>
</div>
</div>
</body>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
Dobře, mezi oběma vidíme rozdíly.
React má pouze jednoduchý obsah, ale Next.js již vytvořil html soubor. To znamená, že goole crawler rozumí obsahu vytvořenému Next.js. Pokud tedy chcete zlepšit SEO ve své webové aplikaci, je tento framework dobrou volbou.
Závěr
V tomto článku jsem právě porovnal funkčnost mezi Next.js a React.js. Tento článek samozřejmě ukazuje znalosti jednoduchých SSG. Budu psát články, jak získat data API pomocí Next.js, jako je použití getStaticProps, getStaticPaths a tak dále. (getStaticProps a getStaticPaths jsou funkce připravené Next.js)
Pokud vás tento článek zaujal, napište mi komentář!
Děkujeme, že jste si našli čas na přečtení tohoto článku!
Životopis
Jsem studentem ve Vancouveru v Kanadě a mám pracovní zkušenosti s back-end technologií. Líbí se mi také služby AWS a mám nějaké certifikace.
V současné době se učím front-endové technologie jako JavaScript/TypeScript, React, Next.js.
Hledám práci na částečný úvazek nebo dobrovolnickou práci v Kanadě. Pokud jste na mě zvědaví, prosím kontaktujte mě😸