Next.js:
Node.js
[PM2](https://note.com/mega_gorilla/n/nff477d9f263d)は、Node.jsアプリケーションを本番環境で安定的に運用するための強力なツール
### React
| 用語 | 意味 |
| —————————— | ———————————— |
| `__dirname` | このファイルがあるディレクトリの絶対パス |
| `path.resolve()` | 引数を結合して絶対パスを作る |
| `path.resolve(__dirname, ‘…’)` | このファイルを基準にした絶対パスが作れる → 安定したフォルダ参照に最適 |
`next-intl.config.ts`のとき注意。
#### イベントハンドラ
ブラウザ上で発生するイベント(クリック、入力、フォーム送信など)に反応して処理を行う
– onSubmit → HTML の <form> で送信時に発火するイベント
– handleSubmit → そのイベントを処理するために書く自分の関数(名前は一応自由慣習で、handleナンチャラにする)
| イベント名 | 対象 | 発生タイミング |
| ——————————- | ———————————– | ———- |
| `onClick` | ボタン、リンク、任意要素 | クリックしたとき |
| `onChange` | `<input>`, `<select>`, `<textarea>` | 値が変わったとき |
| `onSubmit` | `<form>` | フォーム送信時 |
| `onKeyDown` / `onKeyUp` | 入力要素、任意要素 | キー押下/キー離し |
| `onMouseEnter` / `onMouseLeave` | 任意要素 | マウスが入った/出た |
### Next.js
Create-next-appの[選択肢について](https://zenn.dev/ikkik/articles/51d97ff70bd0da)
(<- | -> で Enter, 選択肢間違えたらCtrl + c) [ npx create-next-app@latest ]
npm run dev ( yarn dev )は, package.jsonの“scripts“セクションにある
`”dev”: “next dev –turbopack”`
コマンドが実行される.
多言語対応には、[i18next + react-i18next](https://qiita.com/syukan3/items/b4da93fe73cc577012cd)か[next-intl](https://zenn.dev/eju_labs/articles/6ee172b96c5f08)があるらしくて、前者(i18next)はNext.js以外にもReact、Vue、Angularでも使えるらしい。後者は、パフォーマンスとSEO的に良いらしい。
Next.jsはエラー時以外ははSSR(Server Side Rendering)するから、Reactの
> アプリがサーバレンダリングを使用している場合、createRoot() の使用はサポートされていません。代わりに hydrateRoot() を使用してください。
を常に使うっぽい。( エラーページの描画失敗以外: 例えば,
<details>
if (document.documentElement.id === '__next_error__') {
let element = reactEl;
// Server rendering failed, fall back to client-side rendering
if (process.env.NODE_ENV !== 'production') {
const { createRootLevelDevOverlayElement } = require('./components/react-dev-overlay/app/client-entry');
// Note this won't cause hydration mismatch because we are doing CSR w/o hydration
element = createRootLevelDevOverlayElement(element);
}
_client.default.createRoot(appElement, reactRootOptions).render(element);
} else {
_react.default.startTransition(()=>{
_client.default.hydrateRoot(appElement, reactEl, {
...reactRootOptions,
formState: initialFormStateData
});
});
}
// TODO-APP: Remove this logic when Float has GC built-in in development.
if (process.env.NODE_ENV !== 'production') {
const { linkGc } = require('./app-link-gc');
linkGc();
}
}
</details>
Approuterの公式チュートリアルなら, /nextjs-dashboard/node_modules/.pnpm/next@15.3.2_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/client/app-index.js
Chap.6 でNeonが2日放置してたら、connect切断されてたので注意)
↓参考: [Oracleの資料](https://speakerdeck.com/oracle4engineer/ochacafe-nextjs-basics?slide=33)
| ファイル/フォルダ名 | 説明 |
|—————————-|———————————|
| `app` | App Router |
| `pages` | Pages Router |
| `public` | 静的アセット |
| `next.config.js` | Next.jsのコンフィグ |
| `package.json` | プロジェクトの依存ライブラリとスクリプト |
| `instrumentation.ts` | OpenTelemetryのインストルメント(設定値) |
| `middleware.ts` | Middlewareの記述 |
| `.env` | 環境変数 |
| `.env.local` | ローカル環境の環境変数 |
| `.env.production` | 本番環境の環境変数 |
| `.env.development` | 開発環境の環境変数 |
| `.eslintrc.json` | ESLintのコンフィグ |
| `next-env.d.ts` | TypeScriptの宣言ファイル |
| `tsconfig.json` | TypeScriptのコンフィグ |
| `jsconfig.json` | JavaScriptのコンフィグ |
### Middlewareとは
– クライアントとサーバーの間で動作
– 認証
– バリデーション
– データ整形
– セキュリティチェック
– その他(etc.)*多言語対応もココをいじる。
## tailwind の[解説サイト](https://zenn.dev/yohei_watanabe/books/c0b573713734b9/viewer/215e30)
## prisma
とりあえず、用語載ってる[サイト](https://qiita.com/takekota/items/42f6a9066de60da93161)
prisma.<モデル名>.<操作メソッド>
みたいに、.tsx内で使う。(からデータ拾ってるところ探すときはctrl + shift + Rでprisma.で調べれば気合で見つかる。)
(例:
model Plan {
id Int @id @default(autoincrement())
name String
createdAt DateTime @default(now())
}
// 全件取得
const plans = await prisma.plan.findMany();
“`prisma
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
}
とルートディレクトリ直下の.envファイル(create.next.appすれば勝手に作られるかも?なかったら作成)に
DATABASE_URL="mysql://root:password@localhost:13306/HOGEHOGE
って書く。
詳しそうな[zennのサイト](https://zenn.dev/hayato94087/books/e9c2721ff22ac7/viewer/d00oygw3ghp7jdp)
E2EテストフレームワークのCypress
https://zenn.dev/manalink_dev/articles/manalink-cypress-introduce
## Nuxt
クリーンアーキテクチャ
https://zenn.dev/sre_holdings/articles/a57f088e9ca07d
## ORM(databaseいじるやつ)
[Next.js × ORM 実践比較:Prisma / Drizzle / Kysely をDocker上で動かして違いを体感する](https://shinagawa-web.com/blogs/nextjs-orm-docker-hands-on)
翻訳ファイルの書くとき
JSON5(.json5 : おすすめ)を使うとコメントアウト[書ける](https://qiita.com/jkr_2255/items/026e0fdb4570c88c4f51)し[便利らしい](https://qiita.com/yokra9/items/1ac03876415d7fd47a65)
LINKとroute.push
LINKの場合は、localeが自動判定するが、通常のrouter.pushの場合はlocaleをちゃんとわたさなければいけないというNextIntl仕様があるから、統一的に書く場合はuse.routeをNextintlによりラップされたものを使うようにする。(しないとpath.ts:ページジャンプ用typeScriptとかが猥雑になる。)
CI/CD
### CI/CD
– CI: 継続的インテグレーション: 変更を統合するたびに自動でビルド・テストする。
– CD: 継続的デリバリー: 開発したコードを運用環境(AWSのEC2とか)へ展開する準備を自動で完了させるための仕組み。
### Github Actions
– Github Actions: Git hubが提供するワークフロー(なにかのイベント(pushとか)をトリガーにしてジョブを実行させるもの。)
workflow → 全体の設計図
trigger (on: > push:のこと)→ いつ走るか(きっかけ)
job (jobs: > deploy: > runs-on: # 仮想マシン環境 ubuntu-latestとか)→ 作業机ごとに分けたまとまり
-> step(name: HOGE > run: npm install とか) → 作業机の上での具体的な作業
runs on だと環境しか作ってないから、
steps: # ← step
- name: コードを取得
uses: actions/checkout@v4
でコードを取得する。(@の後ろはversion。これのリポジトリは[ココ](https://github.com/actions/checkout))
定期実行を時間でやると、githubのコンピュータリソースが足りないとできないらしいでも、できなかったことが通知されないから、
`on: /n Schedule: /n -cron:”0 0 * * “`より、重要なやつはPRやPushをTriggerにしたほうが[いいらしい](https://youtu.be/RxcUrg3OO3o?t=528)
App router
Next.js 13で導入されたApp Routerは、デフォルトでReact Server Components(RSC)を使用しており、このRSCは非同期関数として動作します。これにより、データ取得をコンポーネントレベルで直接行うことが可能になりました。
具体的には、async/await構文を使用して、外部APIやデータベースからデータを取得する処理をコンポーネント内で書くことができます。これにより、クライアントサイドでのデータ取得(useEffectなど)とは異なり、サーバーでレンダリングが完了する前に必要なデータをすべて取得できるため、レンダリングブロック(render-blocking)なデータ取得を回避できます。
*App Router の layout.js や page.js は、非同期関数 async に対応するように設計されています。
## **「高階関数(Higher-Order Function, HOF)」+依存注入(Dependency Injection)」**
- 高階関数を使って翻訳関数を注入することで、コンポーネントは翻訳方法を気にせずに、注入された関数を呼び出すだけでよくなるので便利。
- データベース接続や外部APIクライアントのような、具体的な実装に依存するロジックを抽象化できます。これにより、開発時と本番環境で異なるデータソース(例:本番ではMongoDB、テストではモックデータ)を簡単に切り替えられる。
Next.js+yjs+BlockNoteでGoogle Docs+Notionのような共同編集エディタを作ろう