Ploigi-Webを動かすNext.jsとは

なぜNext.js

エッジサーバはPythonとFastAPIで開発してきたのだが、ユーザインターフェースとなる部分を何で開発していくかで悩んだ。いろいろな情報がある中でNext.jsという言葉が気になり、最終的には使用することに決めた。

Nest.jsを知るための学習をPloigi-Webを通して行った学習ノートである。

Sever/Client Componentという2つの世界

Next.jsにはユーザに見える部分を扱うための役割を担っている2つの世界がある。

このシステムNext.jsの中にバックエンドサーバとして動く役割を担うNode.jsというものがあり、これがあることでサーバ1つでフロントとバックエンドサーバの役割を満たしている。

本来バックエンドサーバ、フロントエンドサーバと役割で分かれているものは、Next.jsにおいてはSever ComponentとClient Componentに分かれている。

前者はNode.jsの環境であり、データの取得、安全な処理などを担う。一方Client Componentはブラウザ側での動きであるユーザ操作や画面の動きReactのフックを担う。

Sever ComponentとClient Componentは明示的に絶対の区分がされている。それはプログラムファイルの先頭にuse clientがあるかどうかで分けられる。よってその一行がなければそれはNode.jsでどのように動くかの処理であり、ある場合はブラウザ上でどのように動くかを決めている処理といえる。