Next.jsの開発まとめ集

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

# 前提条件
:::note info
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のバージョンを確認
```sh
node -v

npm -v

npx -v

npm install -g yarn

yarn -v
```

- nodeのアップグレード
```sh
##バージョンを確認
nvm ls-remote

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

# プロジェクト作成
```sh
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機能拡張追加

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

https://marketplace.visualstudio.com/items?itemName=PulkitGangwar.nextjs-snippets

- 基本コマンド
```sh
## 開発モード
npm run dev

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

# 追加ライブラリ
```sh
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の使い方
```js
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の設定
```json
{
  "tailwindCSS.experimental.classRegex": [
    ["tv\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}
```

- page開発テンプレート
```js
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で参考になるサイト
- チートシート

https://nerdcave.com/tailwind-cheat-sheet

- フレーム

https://tailblocks.cc/

- カラー

https://tailwindcss.com/docs/customizing-colors

- アイコン

https://icones.js.org/

- UIパーツ

https://tailwindtemplates.io/templates

- HeadlessUI

https://headlessui.com/

- テンプレート
 
https://preline.co/templates.html

- ui.shadcn @card

https://ui.shadcn.com/docs/components/card


# 参考・引用
- node導入参考

https://qiita.com/East_san/items/de66c7d816034ad67ec4

- VScode導入参考

https://qiita.com/opckaiyo/items/c7a9534cc1b204169518

- Next.jsの考え方

https://zenn.dev/akfm/books/nextjs-basic-principle

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

https://youtu.be/Ca1h3KUfQ5k?si=Q_VkiMTNeIQ-WJgg