はじめに
新規開発の案件で、小規模のWebアプリを開発する案件がありました。そのWebアプリにおいて、フロントエンドの技術スタックとして、Next.jsを採用した際の戸惑いをまとめた備忘録となります。
Next.jsの採用を考えている方、何らか技術選定をしている方などの参考になれば幸いです。
筆者含めた周りのメンバーは、「React」と「ReactNative」の知見があるメンバーでした。
ポエム感強めです。Next.jsに関するナレッジを記載している記事ではありません。
結論
技術観点
- React.jsとNext.jsは違う
- ReactのノリでNext.jsを採用することに相当な「覚悟」がいると感じた
- この覚悟に関する記事をX（Twitter）で見かけた気がします。見つけたら追記します
- 全く違う知識が必要になる事実
その他
- 技術選定は慎重に、流行りよりも「根拠」が重要
- 本記事の事象においては、Next.jsを採用するほどの要件、ニーズはなかった
- 採用する理由がない状態で採用した結果、なんでNext.jsを使うのか分からない状態になった
経緯
- 新規開発案件の要件定義が進むなか、何で作るかをぼーっと考えていた
- どこからともなく（上（司）の方から）聞こえてきた「最近はNext.jsが流行っているらしい！」という声
- それで採用が決まりました
- 「ちょっと待った」を言えない自分の技術力の低さは反省です
問題
Reactのノリでいざ開発を始めたところ、以下のような問題に直面しました。「問題」なんて大袈裟な言葉を使いましたが、どれもNext.jsに関する知識不足が招いたものです、
stateが使えない！？
- こんな実装をしたくなる
import { useState } from "react";
export default function Home() {
const x = useState(0); // ここが重要
return (
<main>
anything...
</main>
);
}
- エラー
Error:
× You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
It only works in a Client Component
らしい...。
useEffectが使えない！？
- こんな実装をしたくなる
import { useEffect } from "react";
export default function Home() {
// const x = useState(0);
useEffect(() => { // ここが重要
console.log("initializing...");
})
return (
<main>
anything...
</main>
);
}
- エラー
Error:
× You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
It only works in a Client Component
らしい...Part2。
原因（当たり前の話です）
By default, Next.js uses Server Components.
Next.jsでは、デフォルトで「サーバーコンポーネント」になるらしい。サーバーサイドでレンダリングされるコンポーネントに対して、クライアントで動作するフックを使用しているために発生しているエラーのようです。
対策
To use Client Components, you can add the React "use client" directive at the top of a file, above your imports.
ということで、ファイルの先頭に以下を追記して、該当のページを「クライアントコンポーネント」としました。
"use client";
Reactの知識のみで挑んだところ、安直にこの対策を実施し、これまで通り、hookを使用した開発を始めました。
何が起こったか
全ファイルにuse clientを記載した。
思ったこと
何のためにNext.jsを使用しているのか...。
根本原因
- 理解、インプット不足
- Next.jsのRSCをはじめとして、サーバー、クライアントのそれぞれでレンダリングを行ってアプリケーションを構築する思想を全く理解していなかった
- レガシーな情報で止まっていた（hookどころか、クラスコンポーネントで実装していた頃）
この記事を残した理由
さて、自分の無力さを存分にさらけだしてきました。言い訳する余地がないくらいに、今回は自分の知識不足が招いた事象です。これから皆様が開発を進めるプロダクトにおいて、一ミリでも、一ビットでも参考になればと思っております。
これからについて
Next.jsのドキュメントは、とても＊１００くらい夢が広がります。シンプルなSPAだけで生きてきた筆者が、Next.jsのドキュメントを読んでいると、ワクワクが止まりません。新しい価値を提供できるように、勉強を続けていきたいと思います。
結論
技術観点
- React.jsとNext.jsは違う
- Reactのノリで始められないこと
- 同じではないこと
その他
- 技術選定は慎重に、流行りよりも「根拠」が重要
- 特定の技術を採用する「根拠」を説明できるだけの理論が重要
であることを、ひしひしと感じました。
最後に
ご紹介です。
こんな筆者が勉強に使用している書籍です。adなどではないので、お気軽に参照、購入いただければと思い、ご紹介です。