プログラミングマガジン

プログラミングを中心にIT技術をできるだけわかりやすくまとめます。

  • ホーム
  • Next.js
  • 【Next.js】ディレクトリ構成、「.next」ディレクトリ、「_app.tsx」と「_…
 
 
     
  • サーバー言語  
    • Python
    • Ruby
    • PHP
    • SQL
  •  
  • インフラ  
       
    • AWS
    •  
    • 基本
    • Git
  • Web
       
    • Web開発
    • JavaScript
    • Vue.js
    • React
  •  
  • 設計  
       
    • 実装設計
    • DB設計
  • 問い合わせ
  

【Next.js】ディレクトリ構成、「.next」ディレクトリ、「_app.tsx」と「_document.tsx」、APIルート機能など

01.17

  • miyabisan2
  • コメントを書く

この記事は2分で読めます

ディレクトリ名説明
.nextプロジェクト作成時にはなく実行すると生成されます。この中にプロジェクトから生成されたWebアプリのファイル類が保存されます。
pagesここで指定したファイル名はパス名になる。(_app以外)
└_app.tsxここに記述された内容は全てのページに適用されます。なので、レイアウトファイルなど全てのページに適用したいコンポーネントを適用すると良いでしょう。
└_document.tsxNext.jsのPageコンポーネントはデフォルトで<html>タグの定義を行うがそれを拡張したい場合に使う。
└ファイル名.tsxここで指定したファイル名がパス名になる。
└api以下のディレクトリにファイルを配置すれば「簡易的なAPIエンドポイント」を作成できます。
public公開されるリソース類(イメージファイルなど)が格納されます。
stylesスタイルシートファイルがまとめられます。
next.config.jsnext.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.htmlnpm 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
スポンサーリンク
  • 2022 01.17
  • miyabisan2
  • コメントを書く
  • Next.js
  • Tweets Twitter
  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. 2022 01.16

    【Next.js】各種コマンドについて

  2. 2021 05.08

    【Next.js】「ISR(Incremental Static Regeneration)」について

  3. 2024 02.17

    【Next.js】Server Actionsについて

  4. 2023 09.01

    【Next.js】App Routerについて

  5. 2023 08.30

    【フロントエンド】2023年9月現在の技術選定

  6. 2022 10.08

    【Next.js】SSGでApollo Clientを使うには。

  • コメント ( 0 )
  • トラックバック ( 0 )
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

返信をキャンセルする。

【Next.js】各種コマンドについて

【Next.js】「エラーハンドリング」

RETURN TOP

著者プロフィール

エンジニア歴10年で過去に業務系、Webデザイン、インフラ系なども経験あります。現在はWeb系でフロントエンド開発中心です。

詳細なプロフィールはこちら

スポンサーリンク

カテゴリー

  • Android
  • AngularJS
  • API
  • AWS
  • C++
  • CSS
  • C言語
  • DDD
  • DevOps
  • Django
  • Docker
  • Figma
  • Git
  • GitLab
  • GraphQL
  • Hasura
  • Java
  • JavaScript
  • Kubernetes
  • Laravel
  • linux
  • MySQL
  • Next.js
  • nginx
  • Node.js
  • NoSQL
  • Nuxt.js
  • Oracle
  • PHP
  • Python
  • React
  • Redux
  • Rspec
  • Ruby
  • Ruby on Rails
  • Sass
  • Spring Framework
  • SQL
  • TypeScript
  • Unity
  • Vue.js
  • Webサービス開発
  • Webデザイン
  • Web技術
  • インフラ
  • オブジェクト指向
  • システム開発
  • セキュリティ
  • その他
  • データベース
  • デザインパターン
  • テスト
  • ネットワーク
  • プログラミング全般
  • マイクロサービス
  • マイクロソフト系技術
  • マルチメディア
  • リファクタリング
  • 副業
  • 未分類
  • 業務知識
  • 生成AI
  • 設計
  • 関数型言語
RETURN TOP

Copyright ©  プログラミングマガジン | プライバシーポリシー