業務でNext.jsを触る機会を得たため、まずは下記チュートリアルをやってみました。チュートリアルの章ごとの備忘録をまとめます。StartedIntroductionNext.js良いぞ!と機能紹介しているページ。読み飛ばすSetup作業用のhello-nextディレクトリを作成し、以降ここで作業。npmコマンドで必要なライブラリをインストールし、ビュー用のファイルを置くことになるpagesディレクトリを作成します。}}上記package.jsonのscriptsを下記に書き換えるよう指示されるので置換する。devブラウザでhttp://localhost:3000にアクセスしてみる何が表示された?と聞かれるので、404だよーと選択し次へ。Next.jsと表示されてるのでOK!ここで、シンタックスエラーを起こしてみよう。ErrorsNext.jsではデフォルトでブラウザにエラーを出力するよ。エラーを直したらリロードしなくてもページが再レンダリングされるんだ。Pages単体のページは、できたので今度は複数のページを作ろう。);}ブラウザでhttp://localhost:3000/aboutにアクセスしてみるうむ、ちゃんと表示された。次は、これらのページをつなげてみるただ<a>タグで書いちゃうと、サーバーとの通信が発生するよね。クライアントサイドでナビゲーションしたいから、<Link>タグを使うよ。Link作っていたpages配下のindex.jsを<Link>タグを使うように書き換える。Pageをクリックしてaboutページに遷移後、ブラウザの戻るボタンで戻っても正常にindexページに遷移することが確認できる。Support先程、ブラウザの戻るボタンで戻れたのは、location.historyを<Link>タグがハンドリングしてたからなんだ。Props属性値を追加したいときあるよね。title属性を追加したい場合は、こうするはずだ。Index;これは正常にレンダリングされる。Index;ブラウザでhttp://localhost:3000/aboutにアクセスしてみるChromeの開発者モードのElementsタブを確認してもtitle属性は、<a>タグに追加されていない。Chromeの開発者モードのConsoleタブを確認するとエラーがでている。(HOC)実際、title属性を追加しても<Link>タグには、なんの影響もないんだ。hrefか近い属性しか<Link>タグは許容していないからだ。(<Link>タグもといnext/linkがHOCというもので、通常のコンポーネントではないということ。)属性を追加したい場合は、その下のコンポーネント、今回であれば<a>タグに渡せば良い。<Link>タグの子コンポーネントとして必要なことは、onClick属性が使えることだけだ。今後のレッスンではもっと面白い使い方を紹介するよ。documentationをみてみよう。Componentcomponentsディレクトリを作成し、配下にHeader.jsを作成する。Componentpages/index.jsとpages/about.jsを編集し、先程作成したHeaderコンポーネントを読みこむ。);}ブラウザでhttp://localhost:3000にアクセスしてみるHeaderコンポーネントが読み込まれ、Home、Aboutそれぞれで遷移することが確認できる。ここでちょっとした変更をしてみよう。devで起動したアプリケーションをSTOPする。componentsディレクトリをcompsにリネームしてみる。pages/index.jsおよびpages/about.jsで、Headerコンポーネントの読み込み先を../comps/Headerに変更する。Directoryちゃんと動くよね。コンポーネントを置くディレクトリは好きな名前にしていいんだ。特別な名前が必要なのは、/pagesディレクトリと、/publicディレクトリだけなんだ。コンポーネントは/pagesディレクトリ配下にも作成できる。今回そうしなかったのは、Headerコンポーネントへの直接のリンクが不要だからだ。(http://localhost:3000/Headerにアクセスするのは不要。ここでcompsは、componentsにリネームして戻しておく。Component共通のCSSスタイルをあてたいときあるよね。共通のレイアウトコンポーネントを作っていくよ。componentsディレクトリ配下にMyLayout.jsを作成するよ。Layout;そして、このレイアウトコンポーネントを使うためにpages/index.jsとpages/about.jsを編集する。#DDD'の枠線があることが確認できた。次に、components/MyLayout.jsから{props.children}を削除してみよう。Components{props.children}を削除すると、Layoutコンポーネントの中においたコンテンツはレンダリングされないんだ。Layoutコンポーネントの作成方法をひとつ紹介したけど、他にも作成する方法があるよ。Components今回は、2つの方法について紹介したよ。Layoutコンポーネントとしてコンポーネントは、スタイル適用やページのLayoutなどに使えるんだ。NPMモジュールから読み込む方法もあるよ。upLoginユーザーは見つかりませんでした。