Next.js なんですか Next.jsとはreact.jsのクライアント側のレンダリングの問題解決ために作りました。 react.jsに作ったウェブページは凄く軽いのはウェブサイトの表示は非常にインタラクティブからです。
その他はデータが変わる時react.js既に更新しているからです。
でもそのためにページを表示前にその全部のJavaScriptのファイルがクライアント側にロードしなければならないです。
問題はそのファイルは多ければ多いほどロードの時間長くなる。その他SEOの問題もあります
その二つの問題はpre-renderingのテクニックを使って解決ができます。pre-renderingとはクライアント送る前にJavaScriptのファイルとHTMLのページ生成するテクニックです。
pre-renderingは2つの形がありますそれはServer Side Rendering(SSR) と Static Site Generator (SSG).
Server Side Rendering(SSR)
HTTP要求に基づいてクライアントにコンテンツをレンダリングするプロセスです、クライアントがリクエストを作成し、サーバーがそれを処理して、レンダリングされたHTMLをクライアントに返します
Static Site Generator （SSG）
入力ファイルから静的ページを構築するためのツールです。 コンテンツ（ヘッドレスCMSなど）を取り込み、選択したテンプレートを適用して、静的なHTMLページを生成します。
Features
pre-rendering以外は、next.jsはたくさん特徴があります例えば：
- Page-based routing systemページのアドレスはページのファイル名になる
- Code splittingloadingのページを縮まるためにJavaScriptのコードは分散している
- Client-side routingウェブアプリケーションがブラウザーの位置を読み取り、更新し、特定のユーザーインターフェースをレンダリングすることが可能です。
- Fast refresh support
- Built-In CSSCSS ModuleとSAAS とCSSをサポートする
- Automatic Image Optimization
- API Routesライブラリーなし新しAPIを作れる
次はnext.jsで使ってブログ一緒に作りましょう
準備するもの
- Visual Studio Code
- ターミナル
- Nodejs + NPM/yarn
Install Next JS
ターミナルの中にコードを入れる
npx create-next-app my-blog
次はフォルダの移動とアピりを実行する
cd my-blog
yarn dev
問題がないだったらこの画面になるはずです
Navigation
インストール後は新しいナヴィゲーションと新しいページを作らなければならないです。
next.jsにシステムルーティングはpage-basedだから各ページには、ページのファイル名に応じたURLアドレス（スラッグ）も同じです。
例えば：
ページ pages/about.jsは、この/aboutのURLアドレスでアクセスできます
Halaman pages/posts/my-post.js は、この/posts/my-postのURLアドレスでアクセスできます
これはreactと違って、reactはシステムルーティングしたいならreact-router-domが必要です。
新しいページを作ろう
pagesの中にpostsと言うフォルダを作ってそして中に first-post.js と言う名前のファイルを作ってください
そしてこのコードをコピーしてfirst-post.js.の中にペーストして
export default function FirstPost() {
return (
<>
<h1>First Post</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
</p>
</>
);
}
各ページにリンクする
各ページにリンクを作るためにLinkのタグかのタグを使わなければならないです。
index.jsの中にこのコード入れましょう
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}>Welcome to My Blog</h1>
<div className={styles.grid}>
<div className={styles.card}>
<Link href="/posts/first-post">
<h3>First Post</h3>
</Link>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry...
</p>
</div>
</div>
</main>
<footer className={styles.footer}>
</footer>
</div>
);
}
結果：
