| ディレクトリ名 | 説明 |
|---|---|
| .next | プロジェクト作成時にはなく実行すると生成されます。この中にプロジェクトから生成されたWebアプリのファイル類が保存されます。 |
| pages | ここで指定したファイル名はパス名になる。（_app以外） |
| └_app.tsx | ここに記述された内容は全てのページに適用されます。なので、レイアウトファイルなど全てのページに適用したいコンポーネントを適用すると良いでしょう。 |
| └_document.tsx | Next.jsのPageコンポーネントはデフォルトで<html>タグの定義を行うがそれを拡張したい場合に使う。 |
| └ファイル名.tsx | ここで指定したファイル名がパス名になる。 |
| └api | 以下のディレクトリにファイルを配置すれば「簡易的なAPIエンドポイント」を作成できます。 |
| public | 公開されるリソース類（イメージファイルなど）が格納されます。 |
| styles | スタイルシートファイルがまとめられます。 |
| next.config.js | next.jsの設定ファイル |
_app.tsx
全ページで必要な処理を書く。
- ページ間共通レイアウト
- 共通のstate(Reduxなども）
- グローバルCSS（全ページ共通の）を適用する。
- サーバーサイドレンダリングされるが、ライフサイクルメソッドはクライアントサイドでも実行される。
_document.tsx
Next.jsのPageコンポーネントはデフォルトで<Html>、<Head />、<Main />、<NextScript />の定義を行いますが、それを拡張したい場合に使います。
特徴
- getInitialPropsを使用しておりSSRのみの実行になるのでクライアントサイド処理を書くべきではない。（例えば、onClickイベントなど）
- Nex.js9.3以降を使っている場合は、「getServerSideProps」を使った方が良い。
- CSSは設定してはいけない。
「APIルート」機能について
Next.jsで簡易的なAPIエンドポイントを作れる機能です。
ファイルの配置場所
以下のようにAPIの名前をファイル名としてつけて配置します。
|
1 |
pages/api/api名.ts |
実装
|
1 2 3 4 5 6 7 8 9 |
import type { NextApiRequest, NextApiResponse } from "next"; async (req: NextApiRequest, res: NextApiResponse) => { // クエリパラメータ取得 let { クエリパラメータ } = req.query; // レスポンス返却 res.status(200).json({ xxxx:yyy }); } |
使い方
|
1 |
http://localhost:3000/api/{api名}?パラメータ1={パラメータ内容} |
next.config.js
next.jsの設定ファイル。デフォルトではないがルートディレクトリに作成すればNext.jsの高度な設定ができます。
images
domains
外部ドメインから画像を取得したい場合に使う設定です。外部ドメイン名を配列形式で指定します。
experimental
appDir
Appルーターを使うかどうかの設定です。trueを設定した場合はAppRouterを使うという設定になります。
.nextディレクトリ
Next.js13.4のApp Routerでの実装時
| cache | |
| server | |
| └app | |
| └index.html | npm run buildでstaticレンダリングした場合のHTML(cacheオプションにforce-cacheを指定した場合） |
| └chunks | |
| └pages | |
| static | |
| types | |
| BUILD_ID | |
| app-build-manifest.json | |
| app-path-routes-manifest.json | |
| build-manifest.json | |
| export-marker.json | |
| images-manifest.json | |
| next-server.js.nft.json | |
| package.json | |
| prerender-manifest.js | |
| prerender-manifest.json | |
| react-loadable-manifest.json | |
| required-server-files.json | |
| routes-manifest.json | |
| trace |
この記事へのコメントはありません。