Next.jsアプリケーションの雛形を生成する
create-next-appを使って、Next.jsアプリケーションの雛形を生成します。言語はもちろんTypeScriptです。Tailwind CSSも使ってみると便利ですね。
> npx create-next-app@latest
✔ What is your project named? … next-notslack-app
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No
指定した設定は下記の通り
- アプリケーションの名前：next-notslack-app
- TypeScript：利用する
- Tailwind CSS：利用する
- ソースコードの場所：srcフォルダ内に配置
- App Router：利用する
- インポートエイリアス：カスタマイズ無し
雛形が生成できたら、アプリケーションフォルダに移動して、開発用サーバーを起動します
> cd next-notslack-app
> npm run dev
お勧めのパッケージ
Next.jsと一緒にtRPCとPrismaをよく使っています。
それぞれ下記のコマンドでインストールできます。いずれもアプリケーションフォルダ内で実行してください。
npm install @trpc/server @trpc/client @trpc/next @tanstack/react-query @trpc/react-query zod superjson
npm install prisma -D
npx prisma init
npx prisma migrate dev --name init
npm install @prisma/client