1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

next.jsを始まりましょう

Posted at

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

ターミナルの中にコードを入れる

terminal
npx create-next-app my-blog

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

terminal
cd my-blog
yarn dev

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

1_X6nfNqQJOtM73DAmfRq0KQ.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が必要です。

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

1_ya1QoC6S6ckX9XpF9q68DQ.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>
    </>
  );
}


各ページにリンクする
各ページにリンクを作るために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>
  );
}

結果:

1_BxewjHlYsDPIKq9RdNLOmQ.gif

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?