Next.jsで開発するコツ

さまざまな現場やプライベートで Next.js を使用してきましたが。

抑えるべきポイントを抑えないとムダに開発の難易度が上がってしまいます。

ということで今回は、Next.js を使用して開発を行う際のコツを書いていこうと思います。

getServerSideProps の中身はシンプルに

自分も最近まで理解できていなかったのですが、getServerSideProps 内で複雑な処理を行うことはあまりオススメできません。

getServerSideProps で fetch を叩くケースは多いと思いますが、返ってきたデータは加工などを行わず、そのまま props に突っ込んで return するようにしましょう。

getStaticProps についても同様です。

getServerSideProps の優先度は低めに

getServerSideProps 自体は非常に便利なライフサイクルメソッドですが、あまり積極的に使用するべきではありません。

可能な限り getStaticProps やクライアントサイドからの fetch に寄せましょう。

src フォルダーを作成しましょう

公式サイト にも記述がありますが。

Next.js はデフォルトで src フォルダーに対応しています、環境作成時から src フォルダーを作成してくれよと思わなくもないですが。

プロジェクトのルートディレクトリ直下は多くのファイルを配置せざるを得ないため、実装などは src フォルダー内に寄せたほうがスッキリすると思います。

また絶対パスも貼りやすくなるため、オススメです。

絶対パスで import するようにしましょう

公式サイトに書かれている通り、Next.js はデフォルトで絶対パスの記述に対応しています。

tsconfig.json ファイル内の compilerOptions に baseUrl の key を追加して、src フォルダーを作成している場合は src を value に割り当ててあげましょう。

これだけで絶対パスに対応してくれるので、基本的にこれ以外の alias を貼る必要はないかなと。

そんな感じです。