はじめに

　本書を手にとっていただき、ありがとうございます！

　この本では、タイトルにもあるように以下の技術を用いてサンプルアプリケーションを作成していきます。

　・Next.js¹（以下Next）

　・Prisma²

　・GraphQL Code Generator³

　また、メインは上記技術となりますが、それ以外にも以下の技術を採用しています。

　・Tailwind CSS⁴

　・NextAuth.js⁵

　・Apollo GraphQL⁶

　・Prettier⁷

　・ESLint⁸

　・Vitest⁹

　・React Testing Library¹⁰

　・GitHub Actions¹¹

　以前、ZennにNuxt+Firebase+Tailwind CSS+TypeScript+αで作るWebアプリケーションの雛形¹² という本を出しました。これが約2年前で、当時はこの技術スタックが最高！と勝手に思っていました。

　しかしながら、現在ではまた新しい技術の登場や、当時からあった技術がさらに進化した兼ね合いで、私の好みの技術スタックもかなり変わってきました。

　本書では、現時点で非常にオススメできる技術スタックを筆者の独断と偏見で紹介していければなと思います。フロントエンドの技術に馴染みがない方でも、チャプターごとにステップアップ形式でコードを追加していくため、途中で動作しなくなる･･･といったことはないはずです。

　ぜひ、進化したWebアプリケーションの開発環境をご体験ください。

対象読者と本書の解説範囲

対象読者

　・Next、Prisma、GraphQL Code Generatorなどの技術を用いたフルスタックなWebアプリケーションの開発環境の構築方法が知りたい方

　・フロントエンドの各種ツールの設定方法が知りたい方

　・ある程度のWeb開発の知識がある方（HTML、CSS、JavaScript、TypeScript、npm、Yarnなど）

　ざっくりですが、本書を読むために必要な実務経験の年数は最低1年くらいでしょうか。経験年数がその人の実力を反映しているとは思いませんが、最低でもそれくらいの実務経験がないと、本書の内容を理解するのは難しいかなと思います。

　もちろん実務経験がなくても、同じくらいの期間をフロントエンドに関連する技術の学習に費やしている方であれば理解できるはずです。

本書で解説しないこと

　・プログラミング言語や各種ライブラリーの基本的な使い方

　・執筆時のライブラリーのバージョンを超えた解説

　本書と似たような内容を説明したFullstack app with TypeScript, Next.js, Prisma & GraphQL¹という記事があります。こちらは英語で書かれた記事ですが、本書よりも基本的な内容の解説が含まれているため、場合によっては補助的に参照できると思います。

　一方で本書では上記の記事では触れていない、より実践的なプロジェクトの構成方法や、各種ライブラリーのセットアップについても言及しています。上記記事は無料で読めますので、そちらに軽く目を通していただいて、もし興味を持てた場合は、本書もおそらくお役に立てるのではないかと思います。

開発環境

　・Node.js (v16.17.0)

　・Yarn

　・Docker

　本書では特に断りがない限り、Yarn²を用いて環境を構築していきます。Yarnの使い方がわからない方・Yarnを利用したことがない方は、本書を読む前に一通りYarnの使い方について習熟しておくことをおすすめします。

　どうしてもDockerの環境を用意するのが難しい、という方は、Dockerがなくてもサンプルアプリケーションを動作させることはできるかと思いますが、ローカル環境への環境構築方法等は説明しませんのでご了承ください。

謝辞

　本書をレビューしていただいた東度基さんに多大なる感謝をいたします。ありがとうございました。

免責事項

　・本書に記載された内容は情報提供のみを目的としています。本書の記載内容に基づく一切の結果について、本書の発行元はいかなる責任も負いません。

　・本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。

目次