Next.js（App Router）+ TailwindCSS + etc を勉強するのに最強の教材を見つけたかも!?

モダンなWeb技術（Next.js等）× 包括的な機能実装を学べる教材・サイトってあんまりないですよね？

そんな中で、最新のフロントエンド技術を網羅的に学べる、素晴らしいサイトを見つけたので、紹介します。

「Taxonomy」

「Taxonomy」（https://tx.shadcn.com）というサイトでは、Next.js、React、TailwindCSSなどのモダンWeb技術を使った実践的なプロジェクトを構築しながら、その仕組みを学んでいくことができます。

英語なのがネックですが、今はブラウザ上で翻訳機能があるのでそこまで気にしなくても大丈夫でしょう。

また、オープンソースかつわかりやすいドキュメントが掲載されているので、その欠点を感じさせないくらいの価値があると思います。

サイトの特徴

• Next.js 13の新機能であるApp Routerを使用
• 魅力的なUIをTailwind CSSで構築
• 多数の機能実装例（認証、API経由のデータ取得など）
• 詳細な手順説明と参考リソース多数

学べる内容

• Next.js 13の仕組み全般
• TailwindCSSの効果的な利用方法
• React最新フック・ロジックの習得
• ユーザー認証の実装手順
• データベースとのデータ操作
• APIから外部データを取得する方法
• その他UI/UX機能の実装手法

サンプルアプリを実際に構築しながら、基礎から実践まで幅広く学習できる点が大きな魅力だと思います。

最新技術に対応しつつ、ウェブ制作に必要な多様な機能を身につけられると思います。

終わりに

ちなみに、「Taxonomy」というサイトは、shadcn（Vercel社のエンジニア）によって構築されています。

shadcn/uiという最高に使いやすいUIコンポーネントを提供していることで有名です。

さらに、Vercel社はNext.js自体を開発している会社でもあります。

また、Vercel社は最近、v0という入力したテキストに対応したUIを提案してくれる生成AIサービスをリリースしたことでも知られています。

ほんとに「天下のVercel / shadcn様」って感じですよね？

Web開発においては、最高の会社・エンジニアたちが開発したサービスばかりなので、今回紹介した「Taxonomy」以外のサービスも使ってみることをお勧めします！