API は、Next.js や TypeScript を使った Web 開発において、異なるアプリケーション間でのデータの受け渡しや、外部サービスとの連携などで重要な役割を果たしています。

Application Programming Interface（アプリケーションプログラミングインターフェース）

Apollo とは、GraphQL を扱うためのクライアントライブラリです。Apollo を使うことにより、GraphQL のクエリとレスポンスを扱うことができます。

アポロ

Apollo

2023 年 5 月、Next.js 13(v13.4.0) では新しい機能と規則を備えた新しい App Router の安定版が導入されました。App Router は app ディレクトリで使用できます。

アップ・ルーター

App Router

AST は、プログラムのソースコードを解析し、構造化されたデータを生成する仕組みです。これによって、ソースコードをより効率的に処理したり、静的解析を行ったりすることができます。

抽象構文木（ちゅうしょうこうぶんぎ）

Astro とは、フロントエンド開発のための新世代の静的サイトジェネレーターで、JavaScript、TypeScript、React、Vue、Svelteなど複数のフレームワークまたはライブラリを統合し、ハイパフォーマンスなウェブサイトを構築することができます。

アストロ

Astro

async アロー関数式とは、非同期処理を行うためのJavaScript（およびTypeScript）の表現形式の一つで、非同期処理のコードを書く際に役立ちます。

エーシンク アロー関数式

async Arrow Function

Next.js と TypeScript を使って、非同期処理に関するソースコードとその解説を提供します。

エイシンク/アウェイト

async/await

Atomic Designは、Webアプリケーションのデザインシステムを構築する手法で、小さな部品から大きなパターンを組み立てることで柔軟性の高いデザインを実現します。

アトミックデザイン

Atomic Design

AWS Amplifyは、フロントエンドウェブおよびモバイル開発者がセキュアでスケーラブルなフルスタックアプリケーションを構築するためのツールとサービスのセットです。

AWSアンプリファイ

AWS Amplify

Axiosとは、JavaScriptでHTTPリクエストを送信するためのライブラリです。特徴としては、PromiseベースのAPI、JSONデータの自動変換、キャンセルリクエストのサポートなどがあります。

アクシオス

Axios

Call Signature とは、TypeScript で関数の型を定義する際に使用される型シグネチャで、関数が受け取る引数の型と返り値の型を明示的に示すものです。

コールシグネチャ

Call Signature

コールバック関数とは、他の関数に引数として渡され、その関数の内部で呼び出される関数のことを指します。

コールバック関数

Callback Functions（コールバック関数）

Chakra UI を Next.js と TypeScript を使って実装する方法を独自の解説とソースコードで紹介します。

チャクラ UI とネクスト・ジェイエス とタイプスクリプト

Chakra UI

CI/CD とは、ソフトウェア開発プロセスを自動化し、品質の維持と速度向上を目指す一連の手法です。

シーアイ/シーディー

CI/CD

Closure とは、関数とその関数が定義されたレキシカル環境（スコープ）の組み合わせのことを指します。関数はそのレキシカル環境で利用可能な外部変数を "記憶" します。

クロージャー

Closure（クロージャー）

コンポーネントとは、UIの一部を構成する再利用可能な要素で、Next.jsとTypeScriptを使って効率的に開発できます。

コンポーネント

Component

Contentfulとは、ヘッドレスCMSの1つで、コンテンツをクラウド上で管理し、API経由で配信することができます。

コンテンツフル

Contentful

ContextはReactの機能の1つで、アプリケーション内でデータを共有することができます。たとえば、ログインユーザー情報などを、すべてのコンポーネントから参照できるようにすることができます。

コンテキスト

Context

CSRとは、Client-Side Renderingの略称であり、ブラウザ側でのレンダリングを指します。

シーエスアール

CSS Modulesとは、CSSファイル内のスタイルをクラス名に紐付ける手法です。

シーエスエスモジュール

CSS Modules

データフェッチングは、ウェブサイトが情報を取得する方法を教えてくれます。

データフェッチング

Data Fetching

DDD（ドメイン駆動設計）とは、複雑なビジネス要求をうまく取り扱うためのソフトウェア設計手法です。

ドメイン駆動設計

DDD（ドメイン駆動設計）

Vercel での自動デプロイは、Next.js と TypeScript のプロジェクトを効率的にデプロイする方法です。GitHub と連携し、プッシュされたコードを自動的にビルドし、デプロイすることができます。

Vercel で自動デプロイする

Deploy(Vercel)

Destructuring assignment は、オブジェクトや配列の要素を、新しい変数にまとめて代入することができる ECMAScript 2015 (ES6) の機能です。

デストラクチャリング・アサインメント

Destructuring Assignment

デストラクチャリングとは、配列やオブジェクトから値を抽出して変数に割り当てるためのJavaScript（及びTypeScript）のシンタックスです。

デストラクチャリング

Destructuring（分割代入）

DOMツリーとは、WebページのHTML要素をツリー構造で表現したもので、JavaScriptを用いて動的に操作できる特性を持つものです。

ドムツリー

DOMツリー

Dynamic Routes（ダイナミックルーツ）は、Next.js のルーティング機能の一つで、動的に URL パラメータを扱うことができます。これにより、同じページコンポーネントを使って、異なるデータを表示することができます。

ダイナミックルーツ

Dynamic Routes

ECMAScriptは、ウェブブラウザ内のスクリプト言語JavaScriptの標準化された仕様です。

エシマスクリプト

ECMAScript

Electron を Next.js と TypeScript のソースコードを混じえて分かりやすく解説します。

エレクトロン

Electron

Emotionは、CSS-in-JSライブラリの1つであり、Reactコンポーネント内にスタイルを記述することができます。えもじょん と読むと理解しやすいです。

エモーション

Emotion

endpoint は、WebアプリケーションやWeb APIにおいて、データにアクセスするためのURLを指します。

エンドポイント

endpoint

envとは、環境変数のことであり、アプリケーションの設定を外部から変更することができます。Next.jsでは、簡単にenvファイルを作成して環境変数を管理できます。

エンブイ

Enzyme とは、JavaScript テストランナー Jest と共に使用される、React コンポーネントをテストするためのツールです。

エンザイム

Enzyme

エラーハンドリングとは、プログラムにおいてエラーが発生した際に、適切な処理を行うことを指します。この記事では、Next.jsとTypeScriptを使ってエラーハンドリングを行う方法を解説します。

エラー処理

error handling

export async function とは、JavaScriptにおいて特定の関数を他のモジュールから利用できるように公開するための構文で、非同期処理を行う関数を定義します。これにより、ブロッキングを防ぎながら、複雑なタスクの並行実行が可能になります。

エクスポート アシンク ファンクション

export async function

export default function は、JavaScript モジュールシステムにおいて、特定のモジュールからデフォルトでエクスポートされる関数を定義するための構文です。

エクスポート デフォルト ファンクション

export default function

Fast Refresh は、React コンポーネントを編集した際に、自動的にページをリロードし、変更が反映される機能です。

ファストリフレッシュ

Fast Refresh

FastAPI（ファースト・エー・ピー・アイ）は、Python で高速で使いやすい API を構築するためのモダンなフレームワークです。データバリデーション、シリアライゼーション、ドキュメント生成などの機能が含まれており、開発者の効率を高めます。

ファースト・エー・ピー・アイ

FastAPI

Fetchとは、Web APIの1つであり、クライアントサイドからサーバーサイドへHTTPリクエストを送信して、レスポンスを取得するために使われます。

フェッチ エーピーアイ

Fetch API 

Filterメソッドとは、JavaScriptの配列メソッドの一つで、配列内の要素を特定の条件でフィルタリングするためのものです。

フィルターメソッド

filter()

Firebase（ファイアベース）は、Googleが提供する、サーバーレスでアプリケーション開発に必要な機能を一元的に提供するプラットフォームです。

ファイアベース

Firebase

Flux とは、Facebookが提案した、ユーザインターフェースを構築するためのアプリケーションアーキテクチャです。

フラックス

Flux

fsモジュールとは、Node.js の組み込みモジュールの一つで、ファイルシステムに関する操作を提供します。これにより、ファイルの作成、読み込み、書き込み、削除などが可能になります。

エフエス モジュール

fs Module

generateStaticParams は、Next.js が提供する関数で、動的ルートセグメントと組み合わせて、リクエスト時に必要に応じてではなく、ビルド時に静的にルートを生成するために使用できます。

ジェネレートスタティックパラムス

generateStaticParams

Generics とは、TypeScript の機能の一つで、型の汎用性と再利用性を向上させるためのものです。

ジェネリクス

Generics

getServerSidePropsは、ブラウザでページを表示する際に、サーバー側で動的にコンテンツを生成することができます。

ゲットサーバーサイドプロップス

getServerSideProps

getStaticPathsはNext.jsの機能の1つであり、静的なページを生成する際に動的なURLを指定するために使われます。getStaticPathsを使うことで、動的なページを生成するために必要なパスを動的に決定できます。

ゲットスタティックパス

getStaticPaths

getStaticPropsは、動的なコンテンツを含む Web ページを生成するために重要な役割を果たしています。

「静的サイト生成（SSG）」を実現するための、Next.js の機能

getStaticProps

GitHub Actions は、GitHub内でソフトウェア開発のワークフローを自動化するためのツールです。

ギットハブ アクションズ

GitHub Actions

GraphQL とは、API とのコミュニケーションを効率化し、柔軟にデータを取得できるクエリ言語です。Next.js と TypeScript のソースコードを混じえて、分かりやすく解説します。

グラフキューエル

GraphQL

高階関数とは、他の関数を引数として受け取り、または結果として関数を返す関数のことを指します。これにより、複雑な操作を抽象化し、コードの再利用性と可読性を高めることができます。

ハイヤーオーダーファンクション

higher-order function（高階関数）

Immutable（イミュータブル）とは、一度作成された後にその状態を変更できないオブジェクトのことを指します。この特性はプログラムの予測性を高め、副作用を減らすのに役立ちます。

イミュータブル

Immutable

Next.js と TypeScript を用いたインデックスシグネチャの解説とその実装方法について説明します。

インデックスシグネチャ

Index Signature

Interface とは、TypeScript の重要な概念で、特定のオブジェクトが特定の型を持つことを保証するためのものです。

インターフェース

Interface

Intersection Type（インターセクションタイプ）とは、TypeScriptで複数の型を1つに結合するための方法です。これにより、既存の複数の型から新しい型を作成できます。

インターセクションタイプ

Intersection Type

Islands Architecture とは、ページの一部だけを動的に更新し、残りを静的に保つためのアーキテクチャパターンです。この方法は特に、Next.js と TypeScript を使用した Jamstack アプリケーションに適しています。

アイランズアーキテクチャ

Islands Architecture

アイソモーフィック（Isomorphic）とは、主にウェブ開発の世界で使われる概念で、同一のコードをサーバーサイドとクライアントサイドの両方で実行可能にするアプローチのことを指します。

アイソモーフィック

Isomorphic（アイソモーフィック）

ISR は、Incremental Static Regeneration の略で、Next.js が提供する静的サイトジェネレーションの機能の一つです。この機能を使うことで、動的なコンテンツを扱いながらも高速なサイトの表示が可能となります。

アイエスアール

Jamstack とは、JavaScript、API、マークアップの略で、静的サイトジェネレーターや、CDN などを利用して高速でセキュアなウェブサイトを構築するアーキテクチャのことを指します。

ジャムスタック

Jamstack

Jest とは、JavaScript のテストフレームワークであり、特に React や Next.js のようなフレームワークと相性が良いです。TypeScript のサポートもあります。

ジェスト

Jest

JSON Server は、Next.js と TypeScript を使用して実装できる、簡単にRESTful APIを構築できるツールです。開発やテストに活用できるリソースです。

ジェイソン サーバー

JSON Server

JSX は、JavaScript 内で HTML タグを記述するための構文拡張で、Next.js や React などのフレームワークでよく使われます。この記事では、Next.js と TypeScript を用いた JSX の解説と実装方法について解説します。

ジェイエスエックス

JWT（JSON Web Token）とは、セキュアな情報のやりとりや認証を行うための軽量なトークンフォーマットです。Next.js と TypeScript のプロジェクトでよく利用されます。

ジェイダブリューティー

Lambda（ラムダ）とは、無名関数や匿名関数とも呼ばれる、名前を持たない関数のことです。Next.js や TypeScript のコードでよく利用されます。

ラムダ

Lambda

Largest Contentful Paint（LCP）は、ページが表示される速度を測定するためのWebパフォーマンスメトリクスで、ページの主要なコンテンツがどれだけ早く描画されるかを示します。

ラージェスト コンテンツフル ペイント

map()メソッドとは、JavaScriptおよびTypeScriptの配列メソッドで、配列の各要素に関数を適用し、その結果からなる新しい配列を生成するものです。Next.jsのコンポーネント内でよく用いられ、データの繰り返し処理を効率的に行います。

マップ メソッド

map()

Material Iconsは、Google が提供するアイコンセットで、デザインガイドライン「Material Design」に基づいています。美しくシンプルなアイコンが多数含まれており、ウェブサイトやアプリケーションのデザインに活用できます。

マテリアル アイコンズ

Material Icons

メモイゼーションとは、計算結果を記憶しておき再利用することで処理速度を上げるテクニックです。

メモイゼーション

Memoization

メタデータ API

Metadata API

マイクロサービスとは、大規模なアプリケーションを小さな独立したサービスに分割する設計パターンです。これらは独立してデプロイ・スケールでき、通常は RESTful API を通じて連携します。

Jamstack 用語集

Next.js を使った Jamstack 開発を始めよう！Next.js, Jamstack, Typescript
を学ぶための初学者向け教材です。
何を学べばいいかわからない、という方が対象です。
最新情報を随時更新していきます。

Jamstack 用語集

Next.js を使った Jamstack 開発を始めよう！Next.js, Jamstack, Typescript を学ぶための初学者向け教材です。何を学べばいいかわからない、という方が対象です。最新情報を随時更新していきます。

Next.js を使った Jamstack 開発を始めよう！Next.js, Jamstack, Typescript
を学ぶための初学者向け教材です。
何を学べばいいかわからない、という方が対象です。
最新情報を随時更新していきます。