Next.jsの開発まとめ集

概要

Next.jsのアプリ開発の手順や方法をまとめました。また関連の情報をリンクをまとめています。お役に立てれば幸いです。

前提条件

nodeがインストールされていること。
VScodeがインストールされていること。

目次

• nodeの確認
• プロジェクト作成
• Next.jsの開発環境を整える
  • VSCode機能拡張追加
  • 基本コマンド
• 追加ライブラリ
  • classnames
  • dayjs
  • nextjs-basic-auth-middleware
  • Headless UI
  • Heroicons
  • ui.shadcn
• tailwindの開発環境を整える
  • VSCode機能拡張追加
  • Tailwind Variants
• tailwindで参考になるサイト
  • チートシート
  • UIパーツ
  • アイコン

nodeのインストールと確認

• nodeのバージョンを確認

node -v

npm -v

npx -v

npm install -g yarn

yarn -v

• nodeのアップグレード

##バージョンを確認
nvm ls-remote

##バージョンを指定してインストール
nvm install v20.15.1

プロジェクト作成

npx create-next-app@[version]
Ok to proceed? (y) y
✔ What is your project named? … [project_name]
✔ 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? … No / 
✔ Would you like to use App Router? (recommended) …  / Yes
✔ Would you like to customize the default import alias (@/*)? … No / 

Next.jsの開発環境を整える

• VSCode機能拡張追加

• 基本コマンド

## 開発モード
npm run dev

## ビルド
npm run build
## ビルドしたプロジェクトを起動
npm run start

追加ライブラリ

npm install classnames
npm install dayjs@1.11.10
npm install nextjs-basic-auth-middleware@3.1.0

## Headless UI
npm install @headlessui/react

## Heroicons
npm install @heroicons/react

## Tailwind Variants
npm install tailwind-variants

## ui.shadcn
npx shadcn@latest init -d
npx shadcn@latest add button
npx shadcn@latest add card 

tailwindの開発環境を整える

• Tailwind Variantsの使い方

import { tv } from 'tailwind-variants';
const button = tv({
  base: 'text-white p-4',
  variants: {
    color: {
      primary: 'bg-blue-500',
      secondary: 'bg-red-500',
    },
  },
});
button({ color: 'primary' })
// => "text-white p-4 bg-blue-500"

button({ color: 'secondary' })
// => "text-white p-4 bg-red-500"

• settings.jsonの設定

{
  "tailwindCSS.experimental.classRegex": [
    ["tv\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}

• page開発テンプレート

import Image from "next/image";
import Link from 'next/link';
import { tv } from 'tailwind-variants';

const twStyles = tv({
	variants: {
		style:{
			contain01:'',
		},
	},
});

export default function Sqmple01(){
	return(
	<>
		<p className={twStyles({style:'contain01'})}>sample01</p>
	</>
	);
}

tailwindで参考になるサイト

• チートシート

• フレーム

• カラー

• アイコン

• UIパーツ

• HeadlessUI

• テンプレート

• ui.shadcn @card

参考・引用

• node導入参考

• VScode導入参考

• Next.jsの考え方

• 【完全保存版】Next.js App Routerのベストプラクティスを解説