12,673
回編集
差分
ナビゲーションに移動
検索に移動
→useRef
=概要=
*[https://ja.next-community-docs.dev/docs/app-router/getting-started/ Next.js Document]
*[https://qiita.com/newbee1939/items/7ce919f9a1a7153582b8#:~:text=React%20Serv React Server ComponentsとApp Routerをそろそろちゃんと理解したい]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind CSSへの標準対応
=導入=
npm run build
npm start
</pre>
===静的サイトとしてビルドした場合の実行===
*Prisma でのデータアクセスの処理がビルド時に実行され、その時点の静的な出力になる
<pre>
npm run build
npx serve@latest out
</pre>
====ビルド結果がクリーンされない====
*https://blog.unimoku.com/20201209
*/.next /out はビルド時に削除しても良い。
*デフォルトでクリーンされない
<pre>
rm -rf .next out
</pre>
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される
*デフォルトで作成したコンポーネントがサーバーコンポーネントになる
*クライアントコンポーネントにするにはuse clientを記述する必要がある
=====アプリ共通の外枠=====
</pre>
=サーバーコンポーネントコンポーネントの処理=*[https://qiitaja.comnext-community-docs.dev/docs/app-router/keitaMaxbuilding-your-application/itemsrendering/b74ef76171224c2587c4composition-patterns#:~:text=React%20ServE3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3 サーバーとクライアントの構成パターン]
==サーバー側で実行==*Next.jsの基本はサーバーコンポーネントjsの基本はサーバー側でコンポーネントを処理*[https://www.ey-office.com/blog_archive/2024/05/29/tried-running-react-server-component-in-a-production-environment-and-got-a-little-hooked/ 本番環境で動かす]*メリット**サーバーリソースの活用**ダウンロードコードサイズの最小化**機密情報(サクセストークンなど)の管理*クライアントに依存する操作には対応していない**State関連操作(useState,useReducer,useEffectなど)**イベントリスナー(onXxxxx)**ブラウザAPIアクセス**上記を伴うカスタムフック**クラスコンポーネント利用 ==クライアント側で実行==*ファイルの先頭に、'use client'ディレクティブを記述することでコンポーネントをクライアント側で実行可 ==静的サイト==*[https://zenn.dev/hiromu617/articles/1ed6811dc6cf26 静的サイトの生成]*静的エクスポートを有効にすることによりビルド時の生成物がNode.jsサーバーを必要としないものとなる<pre>const nextConfig = { : output: 'export'}</pre>*この機能を有効にすることで、ridirectsやmiddlewareなどのサーバーを必要とする一部機能が使えなくなります*動的レンダリングも一切できなくなってしまうのでこの機能を有効にするかはアプリケーションの性質を考慮して検討
=実装=
}
}
</pre>
===Route Segment Config===
*https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
*レイアウト、ページ単位の設定
*あらかじめ決められた名前の変数をエクスポートしておくことで、個別の設定を施せる
*force-dynamic : 極力キャッシュを無効にし、ページを動的に描画しようとする
<pre>
export const dynamic = 'force-dynamic'
</pre>
=MUI=
[[MUI]]
=外部サービスからのデータ取得=
*標準JavaScriptのfetchが拡張されている
*関数コンポーネントを非同期(async)とすることでコンポーネント配下でfetchメソッドを実行できる
*個々のfetch呼び出しに際して、キャッシュ/再取得ルールを指定できる
*コンポーネント改装間で同一データを取得の場合、リクエストの重複を除去
<pre>
fetch('https://...", { cache: 'force-cache' }); // 無制限にキャッシュ
fetch('https://..."); // 無制限にキャッシュ
fetch('https://...", { cache: 'no-store' }); // 常にデータを取得
fetch('https://...", { cache: 'revalidate: 10' }); // 10秒以上でデータを再取得
</pre>
=Objects=
==useRef==
*https://ja.react.dev/reference/react/useRef
*ref を変更しても、再レンダーはトリガされないということです。このことから、ref は、出力されるコンポーネントの外見に影響しないデータを保存するのに適しています
*ref を使用することで、次のことが保証されます。
*レンダーを跨いで情報を保存できます（通常の変数は、レンダーごとにリセットされます）。
*変更しても再レンダーはトリガされません（state 変数は、変更すると再レンダーがトリガされます）。
*保存された情報は、コンポーネントのインスタンスごとに固有です（コンポーネントの外側で定義された変数は、コンポーネントのインスタンス間で共有されます）。
*[https://zenn.dev/tns_00/articles/react-typescript-form-error-of-value TypeScriptでエラーの場合]
<pre>
import { useRef } from 'react';
const txtKeyword = useRef<HTMLInputElement>(null);
console.log(`txtKeyword.current.value:${txtKeyword.current?.value}`);
:
<input type="text" ref={txtKeyword} ../>
</pre>
=Tips=
© 2006 矢木浩人
