駑馬十駕
React
Firebase

TL, DR

Next.jsを入門してみた

この1年でかなり進化したと噂のNext.js。

きっかけはこちらの記事。

https://qiita.com/thesugar/items/01896c1faa8241e6b1bc

はてブでもかなりバズっていたのでご存知の方も多いのではないかと思う。

とりあえず上記の記事の通りにチュートリアルを進めてルーティングであったり、getStaticPathsとgetStaticPropsの違いやVercelへのデプロイをなんとなく掴んでからNext.jsのリポジトリのexampleディレクトリの中から自分のやりたいものに近いやつをクローンしていじってたりした。

具体的にはこれですね。

https://github.com/vercel/next.js/tree/canary/examples

かなり豊富でメンテナンスもこまめにされているので一度は覗いておいて損はないと思います。

他にはNext.jsを触っている方が作ってらっしゃるボイラーテンプレートやサービスを参考にさせてもらったりしました。

https://github.com/watanabeyu/next-firebase-hosting

https://github.com/sadnessOjisan/ogpng

https://github.com/wawoon/blog

軽く触ってみて感じたのは

フレームワークってこういうのか〜

というもの。

ルーティングであったりnpm scriptsであったりビルドの設定だったり色々。

デフォルトでTypeScriptを使えるのも良いよね。

自分としてはNext.js側で色々やってくれるので開発に集中出来るのが良いなと思いました。

特にVercelと組み合わせた時のDXは神！(知らんけど)

Nuxtを触った事がないので詳しくは分からないけど正直みんな一回はNext.js触ってみて欲しい。

ハマったところ

環境変数の扱い

詳しくはここ読んで！(丸投げ)

https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser

詳しく書くと、Firebase使うのにconfig/firebase.tsで

  firebase.initializeApp({
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    databaseURL: process.env.DATABASE_URL,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.MESSAGINGSENDERID,
    appId: process.env.APP_ID,
    measurementId: process.env.MEASUERMENTID,
  });

こんなの書くじゃないですか？

で、これの中のprocess.env.PROJECT_IDが読み込めないというエラーが出る。

他は読み込んでるのになぜだ〜と小1時間くらいハマって公式ドキュメントをgoogle翻訳使って読み直したら書いてあった。

This loads process.env.NEXT_PUBLIC_ANALYTICS_ID into the Node.js environment automatically. Allowing you to use it anywhere in your code. The value will be inlined into JavaScript sent to the browser because of the NEXT_PUBLIC_ prefix.

どうやらブラウザ側で呼び出す環境変数は先頭にNEXT_PUBLIC_を付けないといけないらしい。

いや、初見殺しの仕様だな！！！

みなさんお気をつけて。

あとはVercel側で実際に環境変数を入力する所とかはこの記事を参考にしたら大丈夫かと思います。

https://qiita.com/Ikko_Kojima/items/c855635209fa6045a88d

Google Lighthouseでhtmlのlangが設定されてないと言われる

htmlで日本語のサイトだとlang = jaを設定するじゃないですか？

でもNext.jsでindex.htmlファイルはないしなあ・・・と悩んでいたところ、どうやら_document.tsxを作成したら良いらしいと判明。

import React from 'react';

import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="ja">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

こんな感じで作成したら無事設定できました。

Vercelどうよ？

Firebaseにホスティング機能があるのでそっちでも良いかと思ったのでがせっかくNext.jsを触っているのでデプロイはVercelでしました。

pushしてGitHub上でURLを発行してくれるのとか便利ですよね。

あと画面自体も見やすいので気軽に触れました。

料金が基本無料なのもポイント高いです。

あまりガッツリ触ってないのでこれくらいしか感想ないです。

ごめんなさい！！！

最後に

一緒にNext.js勉強してくれる仲間募集中。

以上！！！！