next.jsを始まりましょう

<h1>Next.js なんですか<h1/>
<b>Next.js</b>とはreact.jsのクライアント側のレンダリングの問題解決ために作りました。
react.jsに作ったウェブページは凄く軽いのはウェブサイトの表示は非常にインタラクティブからです。

その他はデータが変わる時react.js既に更新しているからです。


でもそのためにページを表示前にその全部のJavaScriptのファイルがクライアント側にロードしなければならないです。
問題はそのファイルは多ければ多いほどロードの時間長くなる。その他SEOの問題もあります

その二つの問題はpre-renderingのテクニックを使って解決ができます。<b>pre-rendering</b>とはクライアント送る前にJavaScriptのファイルとHTMLのページ生成するテクニックです。


pre-renderingは2つの形がありますそれは<b>Server Side Rendering(SSR)</b> と <b>Static Site Generator (SSG).</b>

<b>Server Side Rendering(SSR)</b> 
HTTP要求に基づいてクライアントにコンテンツをレンダリングするプロセスです、クライアントがリクエストを作成し、サーバーがそれを処理して、レンダリングされたHTMLをクライアントに返します

<b>Static Site Generator （SSG）</b> 
入力ファイルから静的ページを構築するためのツールです。 コンテンツ（ヘッドレスCMSなど）を取り込み、選択したテンプレートを適用して、静的なHTMLページを生成します。
 
# Features

pre-rendering以外は、next.jsはたくさん特徴があります例えば：
- <b>Page-based routing system</b>ページのアドレスはページのファイル名になる
- <b>Code splitting</b>loadingのページを縮まるためにJavaScriptのコードは分散している
- <b>Client-side routing</b>ウェブアプリケーションがブラウザーの位置を読み取り、更新し、特定のユーザーインターフェースをレンダリングすることが可能です。
- <b>Fast refresh support</b>
- <b>Built-In CSS</b>CSS ModuleとSAAS とCSSをサポートする
- <b>Automatic Image Optimization</b>
- <b>API Routes</b>ライブラリーなし新しAPIを作れる


次はnext.jsで使ってブログ一緒に作りましょう

## <b>準備するもの</b>
- Visual Studio Code
- ターミナル
- Nodejs + NPM/yarn


# Install Next JS
ターミナルの中にコードを入れる


```ruby:terminal
npx create-next-app my-blog
```

次はフォルダの移動とアピりを実行する

```ruby:terminal
cd my-blog
yarn dev
```


問題がないだったらこの画面になるはずです

![1_X6nfNqQJOtM73DAmfRq0KQ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2543632/56a44d74-23f4-2329-1160-8bfe2a49fa16.png)

# 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が必要です。


<b>新しいページを作ろう</b>
pagesの中にpostsと言うフォルダを作ってそして中に first-post.js　と言う名前のファイルを作ってください

![1_ya1QoC6S6ckX9XpF9q68DQ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2543632/810b2744-40d4-3feb-a84d-c7820e369a81.png)
そしてこのコードをコピーして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>
    </>
  );
}


```
<b>各ページにリンクする</b>
各ページにリンクを作るためにLinkのタグか<a/>のタグを使わなければならないです。
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>
  );
}
```
結果：

![1_BxewjHlYsDPIKq9RdNLOmQ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2543632/b816ab8b-d4c1-bea6-1634-026efd4b14ce.gif)