はじめに

Next.jsとTailwind CSSを組み合わせてSPA（シングルページアプリケーション）を構成する方法について、簡単に紹介します。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

ReactベースのNext.jsと、ユーティリティファーストなTailwind CSSの組み合わせは、モダンなフロントエンド開発において非常に人気があります。

Next.jsとは？

参考文献

参考文献

参考文献

npx create-next-app my-app

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.jsに以下を設定：

content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"]

globals.cssに以下を記述：

@tailwind base;
@tailwind components;
@tailwind utilities;

import Link from 'next/link';

<Link href="/about">
  <a>Aboutページへ</a>
</Link>

Next.jsとTailwind CSSを使ったSPA構成は、シンプルながら拡張性が高く、学習コストも比較的低い構成です。

受講しているITスクールのハッカソンでも、今後さらに開発を進めていきたいと考えています！！

まずは簡単なプロジェクトから始めて、モダンなフロントエンド開発の一歩を踏み出してみましょう！