Next.jsのはじめかた【基礎】

はじめに

以前NextとReactについて触っていたが、３ヶ月ぶりに学習を再開するので復習を兼ねて学習していく。
執筆開始時点で最新のNext.js 15を用いて学習していく。

追記:メモに時間かけすぎてめっちゃ効率悪い笑　ただめっちゃ理解できるけどね

App作成

まずはアプリの作成からだ。

1. Next.jsのインストール

わからなくなったら適宜調べてね。

2. アプリ作成コマンド

Terminal

npx create-next-app@latest

@latestをつけると、リリースされている最新の安定版のNextを自動でインストールしアプリに使うことができる。
これを応用して、ここでバージョンを指定して作成することもできる
その後自動でアプリ名の入力を要求されたり、Typescriptを使うか、テイルウィンドを使うかなど聞かれる。
ここで聞かれる内容は今後まとめようと思ってる

3. サーバーの起動

Terminal

npm run dev

これで開発サーバーが建てられる。

ファイルディレクトリの解説

ここで、新たに作成されたアプリにいくつかフォルダがあるので紹介していく。

node_modules

これは自動生成されるフォルダ。構わなくていい

public

静的なファイルを置くところ。画像など

src/app

ここがメインコードを書くところ。
このフォルダに有るものはすべてサーバーサイドレンダリング(ユーザーのpcではなく、サーバー側でレンダリング処理を行うこと)になる

layout.js

全ページで共通するところ(ヘッダー、フッター等)を記述する

page.js

app直下のこれは、最初に開かれるページ。またapp配下の名前付きフォルダの中にpage.jsを入れると、そのフォルダの名前をルーティングとして使える。

疑問

わたしはここで疑問に思った。例えばHeader.jsというファイルを作成し、page.jsの中で読み込ませれば、わざわざlayout.jsなんて使う必要がないのではないかと。

いつものようにChatGPT先生にお世話になり回答してもらった。

1.ページごとに同じコードを書く手間がなくなる。

まずHeaderを使う場合、それをimportするコードが必要になり、さらに複数ページに同じように書かなくてはならなくなる。
小規模なアプリならまだいいが、多くのページを用意するアプリではすべてのページにそれを書かなくてはならず面倒

2.共通部分のレイアウトを変えたくなった場合に楽

layout.jsを編集するだけで全てのページに反映される。Headerを使う場合はすべてのページで編集しなくてはならなくなる

3.レンダリングの効率化

Next.jsでは同一のコンポーネントはレンダリングしないようになっている。そのためlayout内で共通する部分は変更がない限り再レンダリングされないのでパフォーマンスアップ。

せっかくNext.jsを学習してるんだし、使わない手はないよね。ありがとうChatGPT.

残りはあまり頻繁に使わないものらしいので、必要なものは後で追記する

コンポーネント作成と呼び出し

Next.jsというものは、コンポーネント管理が非常に重要である。
ページ内の様々な部分をパーツとして分ける(=コンポーネント)ことによって、効率的に使い回すかつレンダリングできるのだ。

作り方

まずapp配下にcompornentsフォルダを作成する。
使用するコンポーネントはすべてこの中に名前付きで格納する。

今回はTodoリストを作っているので、タスクを追加する部分を"AddTask"と名前をつけて管理したい。

その場合、AddTask.jsというファイルをcompornentsフォルダ内に作成し、任意にコードを記述する。

以上

呼び出し方

作成しただけでは表示はされない。
なので呼び出す必要があるが、呼び出し方は

page.js

<AddTask />

このような記述をpage内で記述することにより、この記述した部分に呼び出すことができる。
(スペースは開けなくてもいいよ)

もちろんこれだけではダメで、コンポーネントを呼び出す宣言をする必要がある。

page.js

import AddTask from "./compornents/AddTask";

この記述を一番初めにすることにより初めて呼び出す事ができる
これはタブ補完できるから覚えなくてもヨシ