シン・miyashita.com

Getting Started

ページ内で使用するコンポーネントを作成する。

$ hygen component ui

ページコンポーネントを作成する。 Next.jsの/pagesではルーティングとデータの取得のみを行い、表示はページコンポーネントに任せる。

$ hygen component page

何のためにパッケージを追加したのかを忘れないようにするためのメモ。 package.jsonに追加したらここにも書く。

tailwindcss, postcss, autoprefixer
- tailwindcssを使うために必要
@storybook/*, storybook
- storybookを使うために必要
- npx sb initで自動追加された
tiny-segmenter
- 適切な箇所で日本語文を改行するために使う
classnames
- classNameを扱いやすくするために使う
sharp
- next.jsの画像最適化が高速になるのでインストールが推奨されている
contentful
- contentfulのデータを取得するのに使う
contentful-management
- entryのsnapshotを取得するのに使う
- unpublishやslugを変えた場合、revalidateに変更前の値が必要なのでsnapshotの取得が必要
react-pdf
- reactでスライドPDFを表示するのに使う
react-markdown, rehype-raw, remark-gfm
- markdownをreactで表示するのに使う
cf-content-types-generator
- contentfulのモデルスキーマからTypeScriptの型データを生成するのに使う
hygen
- コンポーネントの雛形を作るために使う
eslint-plugin-tailwindcss
- tailwindcssのクラス名をeslintでチェックするために必要
eslint-config-next
- next.jsのeslint設定
- @typescript-eslint/parserはこれに含まれている
@faker-js/faker
- story用ダミーデータを生成するのに使う

Name		Name	Last commit message	Last commit date
Latest commit History 526 Commits
.github/workflows		.github/workflows
.idea		.idea
.storybook		.storybook
_templates/component		_templates/component
public		public
src		src
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
redirects.json		redirects.json
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
vitest.config.ts		vitest.config.ts