next.js: チュートリアルからの覚書(基本的な利用方法、CSS設定、ルーティングなど)

チュートリアルをせっかくクリアしても、習ったそばから忘れてしまうのでメモ書き。チュートリアルを網羅しているわけではなく、自分が使う内容だけ抜き出している点に注意。

環境: Next.js 12.2.5

Next App作成

Nextを利用したApplicationを作る方法。

npx create-next-app@latest
# TypeScriptを利用する場合
npx create-next-app@latest --ts

yarn や pnpm の場合は以下参照
https://nextjs.org/docs/api-reference/create-next-app

基本動作

<head> の書き換え

Head コンポーネントを利用することで <head> タグの中身を書き換えることができる。

import Head from 'next/head';

https://nextjs.org/docs/api-reference/next/head

外部スクリプトの読み出し

通常であれば <head> 内部などに <script> タグを書くことで読みだすが、 Script コンポーネントを利用する。

Head コンポーネントの外に記述する必要がある点に注意。

import Script from 'next/script';

ロードの遅延(defer)設定や読み込み完了時のフックなどを記述できる。

<Script
  src="https://xxxxx.xxxx.com/xxxx.js"
  strategy="lazyOnload"
  onLoad={() =>
    console.log(`script loaded correctly`)
  }
/>

https://nextjs.org/docs/api-reference/next/script

リンクを貼る

特別な理由がない限り、<a> タグではなく Link コンポーネントを利用する。これにより Next.js の強みである prefetch が適切に行われるため。

Link コンポーネントの為にはまず import が必要。

import Link from 'next/link';

後は通常通り href でリンク先を設定する。

https://nextjs.org/docs/api-reference/next/link

サイト全体のレイアウト / テンプレートの作成

レイアウト / テンプレートという概念は厳密にはないが、 Rails でいう レイアウト 、 Djangoでいうテンプレートのような気持ちでもって全ページ共通の部分を作成する方法。例えばヘッダーやフッター、サイドバーおよび <head> に共通で埋め込みたい情報など。

components などのディレクトリを作成し、その中に新たなコンポーネントの定義ファイルを作成。そのコンポーネントがサイトの全体構成と、その中に子ノードの情報をを含めた状態のデータを返却するようにする。

そしてそのほかの page において上記作成したコンポーネントで囲むようにする。

文字だけだと何を言っているかわからないかもしれないので、具体的には https://nextjs.org/learn/basics/assets-metadata-css/polishing-layout の layout.js を作成・利用しているあたりを参照。

Asset / Metadata / CSS

CSS Module

*.module.css というファイルを作成しその中にCSSを記述。

このファイルをほかの JavaScriptファイルから <*部分>Style という名称で import すると、 *.module.css の中のクラス名として指定できるようになる。

https://nextjs.org/learn/basics/assets-metadata-css/polishing-layout

Global Styling

CSS Moduleではコンポーネントレベルのスタイリングを実施できる。ではサイト全体で統一したスタイリング(global CSS)を適用するにはどうするか。

global CSSを適用するには、 pages/_app.js というファイルを作成する必要がある。このファイルの中で App というコンポーネントを以下のように定義する。 App はすべてのページで共通に使われるコンポーネントであるようだ。

import '../styles/global.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

上記コードで参照されている styles/global.css を作成し、その中に自分が適用したいCSSを記述する。このファイルは pages/_app.js 以外からは import することができない。まぁすることもない気はするけど。

上記 pages/_app.js を作成したら、npmで起動させているサーバを再起動する。

npm run dev

そのほかの事項

CSSのコンパイル動作を変える

Tailwind CSS などを利用する際に使うらしい。よくわからないのでスキップ。

Sass を使いたい人

npm install -D sass

をしてから、css の拡張子を sass / scss に変える。

表示するコンテンツをどこか別の場所から取り出す方法

「どこか別の場所」というのは、ファイルシステムやどこかのサイトのAPI、データベース1など。JSファイルの外という意味。

静的なコンテンツを表示するサイトを生成する場合

事前

Markdownの中に記述されている front-matter という形式のメタデータを取り扱うライブラリが必要となるので入れる。(Markdownをレンダリングするライブラリではない)

npm install gray-matter

https://github.com/jonschlinkert/gray-matter

データをどこかからとってくる方法

データの取り出しを行いたい js ファイルを開き、その中にgetStaticProps 2という関数を作成し任意のデータを props に詰めて返す。本関数は名前の通り static に動くので、build 時に動作するため動的な処理は行えない。

下記の XXXX という関数の部分に何を書くかはチュートリアルでファイルシステムからデータを取り出しているところが参考になる。必要ならばAPI経由、データベースクエリによってデータを取り出しているところも参照。

export async function getStaticProps() {
  /* ここでは XXXX() という別の関数でデータ処理をしている想定 */
  const my_data= XXXX();
  return {
    props: {
      my_data,
    },
  };
}

この props が適切にレンダリング関数でハンドルされるように関数の中身を修正する。Destructuring Assignment(分割代入) を利用。

別に分割代入せず、 props をそのまま受け取るような形にしても問題はない。

export default function Home({ my_data }) {
  ...  /* 何かmy_dataを処理してDOMを返す */
}

動的コンテンツを表示するサイトの構築

動的コンテンツとは、ユーザから送られてくるデータに応じて表示内容を変えるなどの対応を実施するということ。

サーバサイドレンダリングによる方法

上述の getStaticProps の代わりに getServerSideProps を実装する。やる内容は一緒だが、受け取る引数が異なる。本関数はユーザからのリクエスト時に動作する。

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    },
  };
}

注意点として、この関数に記述するのはプリレンダされたページとして表示する必要があるデータにとどめること。リクエスト時に実行されるため処理によってはレスポンス時間が遅くなる可能性がある。

クライアントサイドによる方法

動的サイトと言えば、の方式。最低限必要な部分はプリレンダし、それ以外はAPI経由でクライアントから取り出し、クライアント側でレンダリングをする方式。

SWR というものを利用すると簡単らしい。 (ノータッチ)

動的ルーティング

静的サイトを作るにしても、すべてのページを個別に自分で作成し、 export default function みたいなことを書いていくわけにもいかない。たとえば Markdown ファイルを配置していたら自動でページを生成してほしい。そういったときに動的ルーティングを使用する。

事前

Markdownをレンダリングするために以下を入れる。

npm install remark remark-html

メモ:
remark は Markdownを解析しAST(Abstract Syntax Tree) に分解するためのライブラリで、 remark-html はそれをHTMLとして生成するためのもの。

ファイルを作成する

動的ルーティングを利用して表示するには、それ用の page を作成する必要がある。

ファイル名に引数を [] で囲って含めておく必要がある。 [id].js とか [name].js とかになる。前者ならば id という引数を取って自動生成するページであり、後者なら name という引数を取って自動生成するページである。

Catch-all Routes

... 記法をファイル名に組み込むことで、ディレクトリも含めて変数として取り出すことができる。

[...id].js というファイルを作成すると、そのpageがあるディレクトリに a/b/c/test.js というファイルを作成すると id = ['a', 'b', 'c', 'test'] という配列として解釈される。

必要な関数の実装

動的ルーティング向けのpageには以下が記述されている必要がある。

  1. getStaticPaths : そのファイルが対応するすべてのパスを列挙する
  2. getStaticPaths : そのファイルが表示するデータを引き渡す

1.でその動的ルーティング向けpageで対応できるパスをすべて列挙する必要がある。何を列挙するかというと、ファイル名に入っている引数に入るものを列挙する。 [id].js であれば id として入るデータをすべて入れる。特定ディレクトリの *.md ファイルをすべて見せたいのであれば、そのファイルを列挙して入れていく形になる。

2.についてはサーバサイドレンダリングにも出てきた通りで、表示内容を渡す必要がある。ファイル名の引数を受け取り、引数に応じたデータを返すように作る。

Markdown の表示

単にコードをコピペするだけになりそうだったので、割愛。以下を参照。

https://nextjs.org/learn/basics/dynamic-routes/render-markdown

dangerouslySetInnerHTML にだけコメントを加えておくと、これは通常のJavascriptでも存在する innerHTML をReactが置き換えたもので、JSを利用してHTMLのコンテンツを書き換えるのは危険が伴うということを常に開発者にリマインドするためのものらしい。

以上

自分が必要な情報のみ抜き書きしておいた。

  1. サーバーサイドで処理を行う関数の記述を実施するので、データベースにクエリを投げることもできる。 ↩︎

  2. この関数は page からのみ呼び出すことができる。別のファイルに書いておいて import するという方式はとれないらしい。 ↩︎

コメント

コメントを投稿

このブログの人気の投稿

gnuplot: グラフの色を変更する

イメージ
linetypeによる指定 linecolor + 色名による指定 任意の色を指定 linetype の番号によって指定する方法 gnuplotでは事前に定義されたlinetypeというものがあり、番号で指定することができます。これによりグラフの色を変更することが可能です。例えば： plot sin(x) linetype 2 # linetype を lt と省略して以下でも可能 plot sin(x) lt 2 ここで指定できる番号は show linetypes によって確認することができます。 gnuplot> show linetypes linetype 1, linecolor rgb "dark-violet" linewidth 1.000 dashtype solid pointtype 1 pointsize default linetype 2, linecolor rgb "#009e73" linewidth 1.000 dashtype solid pointtype 2 pointsize default linetype 3, linecolor rgb "#56b4e9" linewidth 1.000 dashtype solid pointtype 3 pointsize default linetype 4, linecolor rgb "#e69f00" linewidth 1.000 dashtype solid pointtype 4 pointsize default linetype 5, linecolor rgb "#f0e442" linewidth 1.000 dashtype solid pointtype 5 pointsize default linetype 6, linecolor rgb "#0072b2" linewidth 1.000 dashtype solid pointtype 6 pointsize default
続きを読む

[Linux] rsyncで進捗を確認する

イメージ
概要 ¶ rsync を実施する際に進捗を確認したい。 やり方 ¶ 要約 時間経過で変わる可能性のある進捗でもいいなら rsync -a --info=progress2 時間が多少かかっても確実な進捗が欲しいなら rsync -a --info=progress2   --no-inc-recursive 方法1(進捗は適宜でもいいですよ派) ¶ rsync では進捗状況を確認するオプションに ver.3.10 から対応 した。 そのオプションは --info=progress2 である。 rsync - a -- info = progress2 / what / to / backup / where / to / backup このオプションを行うと確かに進捗状況が表示されるようになるのだが、大きな階層構造を持つディレクトリをコピーしようとすると、 進捗状況が刻々と下限修正されてしまい、表示の意味がなくなってしまう。 方法2(最初からしっかりした進捗出してくれないと意味ないよ派) ¶ 進捗表示がずれてしまう問題の原因 ¶ 原因は、 rsync がver.3.0.0から導入したrecursive algorithmというアルゴリズム。 recursive algorithmは転送中にリアルタイムにディレクトリ構造を把握していく非同期な処理であり、 非同期なので最初にきっかりと結果が分かるわけではなく裏でこそこそとディレクトリ構造を把握して進捗状況を正確なものへと更新していく。 もちろん、非同期であるから転送開始自体は速やかに行われるという利点があるのだけど、進捗状況をちゃんと確認したい人間にとっては厄介かも。 そこで --no-inc-recursive ですよ ¶ そこで利用するのが --no-inc-recursive オプション。 rsync - a -- info = progress2 -- no - inc - recursive / what / to / backup / where / to / backup このオプションをつけると、recursive algorithmをオフにすることができる。 このアルゴリズムをオ
続きを読む

gnuplotで縦線を引きたい

イメージ
概要 gnuplotで描画するグラフにおいて縦線を引きたい。 以下のような感じ。 やり方は2通り やり方(1): 矢じりなし矢印 set arrow from x1, y2 to x2, y2 nohead を利用する やり方(2): with impulse によって特定のポイントへの縦線を描画する (こっちの方が楽かも) やり方(1): arrowによる方法 set arrow コマンドは矢印を描画可能です。 (x1,y1) から (x2,y2) への矢印を描画するには以下の様な命令をします。 set arrow from x1 , y1 to x2 , y2 そんでもって、矢じり部分を消すには nohead を利用します。 矢印から矢じり部分を消すと直線になります。 set arrow from x1 , y1 to x2 , y2 これを利用して、 (x1,y1), (x2,y2) をうまいこと設定すれば 縦線を引くことが可能ですね。 f ( x ) = x ** 2 set arrow from 5 , 0 to 5 , 25 nohead lt 3 plot f ( x ) これだけです。 因みに、 arrow を間違えてしまったなどで消したいときには show arrow で番号を確認して、 unset arrow <number> で消せます。 # ここで確認して show arrow # ここでその番号の arrow を消す unset arrow 1 やり方(2): with impulse による方法 (おすすめ) 座標を指定し、 with impulse によって縦方向の直線を描くことができます。こちらはやり方(1) に比べて終端のみ指定すればよいのが楽なポイント。 具体的には以下のようなコマンドになります。実際に利用する際には x y を直線を引きたい座標に置き換えてください。 plot "< echo x y" with impulse title "" # 極限まで省略すると以下でもOK
続きを読む