Next.jsのチュートリアル、その1

昨日、Next.jsのドキュメントを読みながら、Next.jsのPages と Next.jsのData Fetching というブログ記事を書いたのですが、世の中には Next.js 日本語翻訳プロジェクト というWebサイトがあって、マジかよ！こっち先に読めば良かった…的な事案が個人的に大発生してしまい、、とは言え、チュートリアルの方は翻訳がなさそうだったので、今日は Start Learning ボタンからNext.jsのアプリを作るヤツをやっていきたいと思います。

そして、一通り終わったら↓のトラハックさんのYoutube動画で復習して、Auth0で認証したり、Prisma ORMでRDBMSとキャッキャしたり、そしてReact InstantSearchでAlgoliaの検索を、、とかっていう風にやっていきたいと思っている今日この頃です。

Create a Next.js App

Create a Next.js Appの最初の方は諸々Next.jsについて書かれているのですが、static generation (SSG) and server-side rendering (SSR) とかっていう記述を見かけて、昔はStatic Site Generation で SSG だったけど、Siteっていうのが後から取れたのかな？とか邪推しながら、読み進めていきます。

っていうか、成果物のお手本的にhttps://next-learn-starter.vercel.app/にホストされている Shu Uesugi さんってファクトフルネスの翻訳の人なのか！っていうか、Twitterでもフォローしてる @chibicode さんなのね？っていうか、日本人でVercelで働いてる人いたのか！とか、そんなことを思いながら作業をはじめていきます。

まずはnpxでプロジェクトを作っていきますよ、と。この辺はこないだ環境を整備したのでサクっといけました。

$ npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
Creating a new Next.js app in /Users/eijishinohara/nextjs/nextjs-blog.

Downloading files from repo https://github.com/vercel/next-learn-starter/tree/master/learn-starter. This might take a moment.

Installing packages. This might take a couple of minutes.


added 276 packages, and audited 277 packages in 5s

44 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Initialized a git repository.

Success! Created nextjs-blog at /Users/eijishinohara/nextjs/nextjs-blog
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd nextjs-blog
  npm run dev

ってことで npm run devしてやって、localhost:3000で無事に立ち上がりました。

ということでさっそくこのページをいじっていきます。

pages/index.jsを開いて<h1>タグの中身を変えていきます、と。保存したら自動的に画面が更新されます、と。開発する時にこれは便利。

Navigate Between Pages

今は1枚もののHTMLだけど、これにページを追加していきます、と。ここでは↓のようなことを学んでいくとのこと。

• file system routingを使って新しいページを追加していく
• Linkコンポーネントを使ってクライアント側でページ間をナビゲーションする
• code splittingとpre-fetchingのビルトインなサポートを学ぶ

ページとルートはファイル名で決まっていく

• pages/index.js だったら / になるし
• pages/posts/first-post.js だったら /posts/first-post になる

既にpages/index.jsは存在するので、pages/posts/first-post.jsを作っていきやしょう。

なんというかとても直感的でReactのそれにくらべて簡単でしょ？っていう例。

次にHTMLでのアンカータグの <a> に変わるアレとして next/link の Link というコンポーネントを使ってやっていきましょう。

pages/index.js に Link コンポーネントをインポートしてそのaタグの部分を置き換えてLinkタグの下にaタグをネストさせるような↓こんな感じに書き換え。

<h1 className="title">
  Read{' '}
  <Link href="/posts/first-post">
    <a>this page!</a>
  </Link>
</h1>

続いて、pages/posts/first-post.jsの方も。

import Link from 'next/link'

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  )
}

いきなり出てきたこの<>と</>は何なんだろう…と思ってちょっとググってみたら、ReactにFragmentsっていうのがあって、複数要素を括る時にこれがあるとHTMLが崩れないで済むっていうっていうところから来てるみたいですね。

例えば↓のようなのがあったとして、

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

で、このColumnsっていうが複数のtdタグを返したいとした時に↓こうしてやるとイイよってことらしいのですが、

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

Short Syntaxとして↓のようにempty tagが使えるっていうことなのだそうで。

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

ってことで、今回もh1とh2の複数のタグを返すのでempty tag(空タグで括ってあげましょうってことなんかな。

そんなこんなで、ページ間を行ったり来たりすることができるようになりました！

続いて Client-Side Navigation という章

LinkコンポーネントはNext.jsアプリでクライアント側でのページ遷移を可能にします、と。これの意味するところは、デフォルトのブラウザで行われる遷移よりもJavaScriptで行われる遷移の方が早いということ。で、それを確認する方法としては、

• ブラウザのdev toolsを開いてhtmlタグの背景色をCSSで黄色にする
• リンクを行ったり来たりする
• 黄色の背景がそのまま変わらなければ、full pageなHTMLが描画されてるわけではないのだよ、と。

で、これがLinkコンポーネントではなく、aタグでhrefでやってたら、ブラウザはフルリフレッシュするので背景は白になります、と。

コレはテンション上がる体験でございますわ。

続いて、Code splittingとpre-fetching。

Next.jsはコードの分割を自動的にするので、必要なページしかロードされない。また、どっかのページがエラー吐いても、他にエラーがなければそのまま動く。更に、Next.jsのプロダクション(本番)用のビルドをすると、Linkコンポーネントが表示されると、そのリンク先を裏側で自動的にpre-fetchするようになってるので、ユーザーがクリックした時は既にそいつが読み込まれてるのだから表示は一瞬だよ、と。

ナニソレスゲー！って感じですやね、、

そして最後に注意書きみたいのがあって、Next.jsアプリの外部にあるURLの場合はLinkコンポーネント使わないで普通にaタグ使ってな、と。

---

とりあえず、今日のところはここまで。