リモートワーク転職で自分らしく リラシク
  1. リモートワーク 転職で自分らしく「リラシク」
  2. リラシクコラム
  3. Next.jsの経験は転職で評価される?SSRと運用の実績

Next.jsの経験は転職で評価される?SSRと運用の実績

Next.jsの経験は転職で評価される?SSRと運用の実のイメージ写真

Next.jsで作ったものを職務経歴書に書くとき、「Next.jsが使えます」で止まる人がいます。同じNext.jsでも、表示するだけのサイトとログインのあるアプリでは手を入れた場所が違います。読む側が先に見るのは、どちらを作ったのかです。

レイアウトとページは既定で「Server Component」(サーバー側で描かれる部品)です*1。「use client」と書いた場所からクライアント側に変わるので、その1行の置き場所は設計の話になります*1。

Relasic(株式会社LASSIC運営)|リモートワーク対応の転職支援

監修・編集責任者:牛尾 昭昌(株式会社LASSIC 執行役員)

この記事のポイント

  • 「Next.jsが使えます」の一行だけでは、表示するだけのサイトを作った人とログインと更新があるアプリを作った人が同じに見えます。先に書くのは、どちらを作ったのかです。
  • Next.jsでは、レイアウトとページが既定で「Server Component」になり、「use client」と書いた場所からブラウザ側に変わります*1。置いた場所は自分で決めた境目なので、そのまま書けます。
  • ブラウザへ渡る環境変数は「NEXT_PUBLIC_」で始まるものだけで、それ以外は空文字に置き換えられます*1。鍵をどちら側へ置き直したかは、運用の1行になります。

リモートワーク対応の正社員求人|Relasic(株式会社LASSIC運営)

Next.jsを使う開発の正社員求人は、リモートワーク対応の求人にも含まれます。

リモートワーク対応の正社員求人を見る →

1. 「Next.jsが使えます」だけでは伝わらない

Next.jsの経験でまず書くのは、作ったものが表示するだけのサイトか、ログインと更新があるアプリかという一点です。同じ道具を使っていても、この2つでは引き受けた作業が別になります。読む側は、書かれた行から自分の会社の仕事に近いかどうかを見ています。まず、作ったものを2つに分けてください。

そのため、最初の一行には道具の名前ではなく作ったものを置きます。表示だけのサイトであれば、一覧をサーバー側で描き、ブラウザへ送る部品を減らした話が書けます。ログインと更新のあるアプリでは、入力と保存をどちらの側で受けたかを書けました。

実際、読む側が探しているのは、自分の会社にある仕事と重なる作業です。そこに重ねられる行が1つでもあれば、面接で話が続きます。

2. 表示だけのサイトとログインのあるアプリで書ける行が違う

ただし、2つの違いは作った画面の数ではありません。表示だけのサイトは出す中身が決まっていて、ブラウザ側で動かす部品を置かずに済みます。ログインして更新するアプリでは、入れた値の保存と表示の出し分けが同じ画面に入ります。書ける行は、この差からそのまま出てきました。

実際、表示だけのサイトで書けるのは、どこまでサーバー側で描いたかです。一覧と詳細をサーバー側の部品のままにしたなら、ブラウザへ送る束に入れなかった部品を数えられます。更新のある画面を持つアプリなら、利用者の状態をどこで持ったかを書けます。図の左右で、書く行の出どころが分かれています。

表示するだけのサイトとログインのあるアプリで書ける行が違う 表示するだけのサイト どこまでサーバー側で描いたか use client を置かなかった画面 作った画面の数と更新のしかた ブラウザへ送らずに済んだ部品 ログインと更新があるアプリ use client を置いた場所と理由 ログインの状態をどこで持つか ブラウザへ渡す環境変数の分け方 React context を使えない場所 境目をどこに引いたかは職務経歴書に書ける実績です

そのため、応募先の求人にどちらが書かれているかを先に読みます。募集要項に会員登録や管理画面と書いてあれば、ログインして更新する側の仕事です。商品の紹介や記事の配信だけなら、表示の速さを扱う側になります。同じ「Next.js経験者歓迎」でも、見ている作業は別でした。

一方、2つの経験が混ざっている人もいます。受託したサイトを作ってから自社サービスの管理画面に移った人は、どちらの行も書けます。その場合は、作ったものごとに分けて2段で書いてください。まとめて1段にすると、どちらの経験も薄く見えました。

あわせて読みたい | PostgreSQL求人は設計と運用のどちらか?

3. サーバー側とクライアント側の境目をどこに引いたかを残す

そのため、境目の話は自分の言葉で書けます。レイアウトとページは、指定しなければサーバー側のままです*1。ファイルの先頭に「use client」と書くと、そこから「Client Component」(ブラウザ側で動く部品)に変わります*1。この1行は境目の宣言なので、置いた場所がそのまま設計の話になりました。

ただし、「use client」を書いた効果は、そのファイルだけで止まりません。指定したファイルが読み込むものと、そのファイルが直接描く部品は、すべてクライアントに送られる束へ入ります*1。だから、置き場所を1段上げると、ブラウザへ渡る部品が増えました。

実際、面接で聞かれるのは、なぜそこに置いたのかという理由です。検索窓と開閉するメニューだけをブラウザ側にしたなら、選んだ事情を話せます。全部の画面に同じ1行を書いていた場合は、選んだ跡が残りません。跡の有無で、話せる量が変わりました。

そのため、サーバー側で作られる中身も一度は書けました。サーバー側では、「Server Component」が「RSCペイロード」(描いた結果を運ぶ形式)に描かれます*1。そのペイロードと「Client Component」を使って、HTMLがあらかじめ作られます*1。この順番を知っていれば、表示までにどこで時間がかかったかを説明できます。

4. 職務経歴書を4段で組み立てて最後に数字で締める

まず、書く順番を決めておくと手が止まりません。第一に作ったものをサイトとアプリに分け、第二に境目をどこに引いたかを書きます。第三に運用で直した場所を足し、最後に数えられる数字で締めます。4段で並べると、読む側は上から順に読めました。

サイトかアプリかを分けて境目と運用と数字を足す 分ける サイトかアプリか 境目を書く 置いた場所と理由 運用を足す 環境変数と配り方 数字で締める 画面数と秒数 4段で書くと作ったものと引き受けた仕事が伝わります

実際、3段目の運用が抜けている書類は多くあります。クライアントに送られる環境変数は「NEXT_PUBLIC_」で始まるものだけで、それ以外は空文字に置き換えられます*1。外部サービスの鍵をブラウザ側へ出さない形に直したなら、その作業は1行になりました。直した理由まで書ければ、運用を引き受けた経験として読まれます。

ただし、サーバー側では使えない仕組みもあります。「React context」(部品をまたいで値を配る仕組み)は、「Server Component」では使えません*1。ログインした人の情報を画面のあちこちで使う設計なら、ここで一度つまずきます。つまずいた場所と、そのあとどう配り直したかは、そのまま書ける中身でした。

そのため、最後の一文には数えられるものを置きます。画面の数、直した件数、表示までに縮んだ秒数のどれか1つを、1行に書けば足ります。

5. 書きがちな一文は何が抜けているかで直せる

ただし、書き直しは言い回しを変える作業ではありません。抜けているのは、作ったものの種類と、自分が引いた境目と、数えられる数字の3つです。どれか1つを足すだけで、同じ経験でも読む側に届く行になります。表の右の列が、足したあとの形です。

書きがちな一文と書き直した一文

書きがちな一文抜けているもの書き直した一文
Next.jsで開発していました作ったものの種類自社サービスの管理画面をNext.jsで作り直し、更新のある12画面を1人で受け持ちました
サーバーサイドレンダリングを担当しました境目をどこに引いたか受託したサイトで一覧と詳細をサーバー側の部品のままにし、検索窓だけを「use client」で切り出しました
表示速度を改善しました何がどれだけ変わったかブラウザへ送る束から表示用の部品を3つ外し、初回の表示までを0.4秒縮めました
環境変数を設定しましたどちら側に置いたかブラウザへ渡す値だけを「NEXT_PUBLIC_」付きに分け、残りはサーバー側に置きました
運用も見ていました受け持った作業と件数公開後の不具合の受付から修正までを月に平均4件引き受け、手順を書き残しました

実際、左の列はどれも本当のことでした。問題は、読む側が同じ言葉を別の意味で受け取るところにあります。開発していましたの一行は、1枚だけの人も20画面の人も同じ形です。どちらか分からない行は、面接の質問にもなりません。

そのため、右の列はそのまま貼らずに、自分の数字へ置き換えてください。画面の数も秒数も、手元の記録から出せるもので足ります。数えていなかった場合は、いま数え直しても遅くはありません。残っているのは、公開したページと更新の履歴です。

6. そのまま貼れる職務経歴書の例文5つ

一方、文の形が決まらないときは、先に型を借りて中身を入れ替えるほうが早く進みます。5つの例文はどれも、Next.jsの経験を行の形にしたものです。自社サービス、受託したサイトのように受けておけば、公開していない仕事でも書けました。数字の部分だけを、自分の記録に入れ替えてください。

職務経歴書に貼れる例文

  • 自社サービスの管理画面をNext.jsで作り直しました。一覧と詳細はサーバー側で描く部品のままにし、絞り込みの入力欄だけをブラウザ側へ出して、12画面を1人で受け持っています。
  • 受託したサイトで、記事の一覧と詳細をサーバー側で描く形にしました。「use client」を書いたのは検索窓と開閉するメニューの2つで、ほかの部品はブラウザへ送る束に入れていません。
  • ログインのある社内システムで、利用者の情報をサーバー側の部品から渡す形へ変えました。「React context」を使っていた2画面を書き直し、ログイン後の画面が出るまでを0.6秒縮めています。
  • 自社サービスで、ブラウザから見える値と見えない値を分けました。「NEXT_PUBLIC_」の付いた環境変数だけを画面側へ渡す形に直し、外部サービスの鍵はサーバー側に置いています。
  • 受託したサイトの公開後の運用を1人で受け持ちました。表示が崩れた報告を受けてから直すまでを平均2日以内に収め、直した手順を書き残して次の担当へ引き継いでいます。

ただし、5つを全部並べる必要はありません。応募先の求人に近いものを2つ選び、残りは面接で話せるように手元へ置いてください。書類に並ぶ行が多いほど、1行あたりの印象は薄くなります。

あわせて読みたい | 志望動機のエンジニア例文|経験者と未経験者の書き分け

7. よくある質問(Q&A)

Q1. Next.jsを触った期間が短くても書けますか

A. Next.jsの経験は、期間よりも作ったものと引いた境目のほうが先に読まれます。3か月でも、画面の数と「use client」を置いた場所を書けば1行になりました。期間だけを書いた行には、質問が返ってきません。

Q2. 表示するだけのサイトしか作っていない場合は不利ですか

A. 不利とは限りません。サーバー側で出した画面の数と、ブラウザ側へ渡さずに済ませた部品の数は、そのまま書けます。ログインのあるアプリを手がけた経験がまだない場合は、隠さずに、いま作っているもので補うほうが早いです。

Q3. 個人で作ったものを書いてもよいですか

A. 個人で作ったものも書けます。公開しているページがあるなら、画面の数と更新の回数を添えてください。仕事で作ったものと分けて並べれば、読む側は見分けられます。

Q4. 全部の画面に「use client」を書いていた場合はどうしますか

A. 書いた事実をそのまま書いて構いません。そのうえで、あとから外した画面があれば、外した理由と結果を1行足してください。直した経験は、最初から通した形と同じくらい読まれています。

あわせて読みたい | データベースエンジニアに未経験から転職できる?資格と最初の仕事

8. まとめ:作ったものと境目と数字の3つで書く

書き出す前の4段

  • 作ったものを表示するだけのサイトとログインと更新があるアプリに分ける
  • 「use client」を置いた場所と、そこで止めた理由を書く
  • 環境変数と「React context」で手を入れた場所を運用の行として足す
  • 画面の数や縮んだ秒数など、数えられるもので締める

そのため、書き出す前に、サイトかアプリかを決めるところから始めてください。表示だけのサイトなら、描いた画面の数と、送らずに済んだ部品を数えます。ログインのある側なら、境目と運用で直した場所を先に並べます。Next.jsの経験も、この3つを書けば1行ずつ形になりました。

Next.jsで作ってきた経験を持ち込める求人

Relasic(株式会社LASSIC運営)は、リモートワーク対応の正社員求人に特化した転職支援サービスです。同じNext.jsの開発でも、表示だけのサイトとログインのあるアプリでは引き受ける作業が違います。応募の前に、どちらが多いかを担当者へ聞けます。

会員登録は無料です。リモートワーク求人の情報を受け取れます

※公開中の求人数は時期によって変わります。記事中の求人の傾向は執筆時点のものです。

出典・参考情報

*1 Next.js 公式ドキュメント「Server and Client Components」(2026年確認)

転職ノウハウ その他の記事

もっと読む 〉
上部に戻る