Webサイト改築計画 No.4 -デザイン・Next.js入門-
2024年2月16日
目次
前回のあらすじ
microCMSとNext.jsに一瞬触れました。
デザイン
少しツールの理解が進んだところで、設計と素描を決めていきます。
モダンなデザインというのがなんなのかよく分かってはいませんが、メニューや記事の提示方法はよく見るタイプのものにしたいです。
というわけでなんやかんやあって作った設計兼素描がこちらです。
ホームページ
記事一覧
記事中身
スマホ用
長々と画像を貼りましたが、基本的な内容が考えられたのでこれをNext.js＋microCMSで出来るようにしましょう。
先は長いので、まずやることを大きく分けていきます。
その1: Next.jsで基礎構造、リンクを確立する
その2: コンテンツを適切に配置する
(その3: 検索機能を作る)
その3は最悪なくても体裁を保てますが、その1とその2は必須です。
これらの作業は全て同じくらいの労力がかかると想定しています。
素描はできたので実際に弄っていきましょう。
Next.js -ホームページはどこ？-
こちらで実験しつつ作成していきます。
そもそも、テストページを作るところから始めます。
初手の画面はNext.jsのデフォルトになっています。さて、どこからページを弄るのでしょうか。
これは /src/app/page.tsx にて定義されている模様です。では、これを一気に書き換えます。
import Image from 'next/image'
export default function Home() {
return (
<p>Hello world!</p>
)
}
結果
変化しました。デフォルト設定だとこのreturnの中に長々とコードが書いてあります。
Next.js -基礎1：App routerとpages.tsx-
ということで、みんな大好きとほほを読みながらやっていきます。
publicディレクトリは直接ブラウザからアクセス可能なファイルを入れるところです。
例としてfavicon.icoをURLに追記すると
こちらの画像が表示されます。
まさにfavicon.icoやヘッダー・フッダーで使う共通画像を入れる場所になります。
Next.jsはv13.4からApp Routerという機能が追加されており、従来のPages Routerとは異なります。
前回記事でApp Router方式を採用しました。
まず、同階層にある「ホームページ」「記事」「ポートフォリオ」を作ります。
「ホームページ」はindex.htmlに当たる部分なので、わざわざパスが付いたものは作れません。
前章で弄ったのはpage.tsxです。別名の.tsxファイルを作るとどうなるでしょう。
一番上の階層にアクセスしてみると...
変化しません。indexに当たるファイルとしてpage.tsxが指定されているということになります。
というのも、"page.tsx"という名称は変更できるものではないようなのです。
なので、例えば"articles"というパスを持つページが欲しいなら
"./articles/page.tsx"というファイルが必要なのです。
実際にhttps://flying-object-lab-next.vercel.app/articlesを直打ちすると、少しのラグを伴ってちゃんと動きます。
ここで悪いことを思いつきました。
このファイル名は何が起こるのでしょう。
デプロイしてアクセス！...404 Not foundが出ます。
githubを見てみるとこんなことになっています。
デプロイできてません。vercelが吐いたエラーはこうです。
Error: EISDIR: illegal operation on a directory, open '/vercel/path0/.next/server/app/articles.html'
指定できない命名だったようですね。消しておきましょう。
Next.js -基礎2：ファイル構成概要とリンク-
.tsx系のファイルはpages.tsxの他に
レイアウト、テンプレート、ローディング、Not Found、エラーのために用意するファイルがあります。
レイアウト・テンプレートは後々必要になるでしょう。しかしその他は二の次です。
_(アンダーバー)から始まるディレクトリはアクセスが行われなくなります。
括弧で囲んだディレクトリはルートグループという括りになり、同じレイアウトやテンプレートを共有できるとのことです。
articlesのディレクトリはこの形式に従った方がよさそうです。
旧サイトの問題点は、重複しているものを直打ちしてしまい内容変えられなかったということです。
Next.js(React)でこれを解決するのは「コンポーネント」機能です。
ヘッダー・フッダー用のtsxファイルを作ります。
デプロイして確認すると
問題なさそうです。
ヘッダーとフッダーに相互移動可能なリンクを付けます。
と、ここで画像に対するリンクをつける必要があります。
publicディレクトリにこのサイトと同じヘッダ用の画像を上げ、横に並べます。
文句
ここから後は文句です。
さて。試行錯誤しておよそ4時間が経過しました。
Next.jsもといreactが未知の問題を色々連れてきました。
まず、画像の表示です。
Next.js(react)ではコンポーネントという仕組みがあります。自分的にはタグを自作関数のように利用できるという印象です。
まず画像を表示しようとしたのですが、htmlのimgタグとは違い、next.jsにはImageというコンポーネントが用意されています。
これがソースを指定しただけでは動かず、altという要素を必須で指定しなければなりません。
極めつけはTailwind CSSです。
これを使っているとコンポーネントとの相性が掴み切れないのです。どこで何をdivで区切り、どこのdivに何を指定すればいいのか
複数のファイルの間を迷走しながら行うので、余計に混乱します。
というわけでして、Tailwind CSSの使用を今後打ち止める可能性があります。
しかし苦労しただけあって、基礎の基礎の構造は出来たといってよいです。
カーソルを合わせるとちゃんと画像が変わります。
プログラムの解説はファイルが急増&長文化したので省略します...
本日は疲れたのでここで切上げます。
また次回！