library

react-scroll

navigationでページ内smoothScrollなどを作るときに有用
https://github.com/fisshy/react-scroll
https://qiita.com/takk0715/items/6b82d7b4d13134d717eb

swiper.js

スライダーの有名ライブラリ。各種FW対応しておりReactコンポーネント化されているものを利用できる。
https://swiperjs.com/react
https://blog.mismith.me/entry/2020/12/31/144154
https://dev.eringiv3.com/blog/post/implement_slider_on_react
https://reiwinn-web.net/2020/07/16/swiper-6-0-4/

react-responsive

レスポンシブ対応のブレイクポイントをHooksを使って設定できる。
swiper.jsと組み合わせてブレイクポイント毎に画面表示枚数を変更するなどの対応が可能
https://github.com/contra/react-responsive
https://tech.asoview.co.jp/entry/2020/04/27/133730

TailwindCSSのBreakpoint
https://tailwindcss.com/docs/responsive-design#overview

SVG

tsx内にSVGを書いた場合にconsoleでエラーが出るため kebab-case を camelCase に書き換える必要がある

https://stackoverflow.com/questions/66685543/reactjs-invalid-dom-property-error-on-svg-elements

https://simpleicons.org/
https://photoshopvip.net/124402

VSCode

https://coliss.com/articles/build-websites/operation/work/vs-code-dont-need-extensions.html
https://www.techpit.jp/courses/99/curriculums/102/sections/766/parts/2679
https://tech-1natsu.hatenablog.com/entry/2018/11/10/231855
https://www.digitalocean.com/community/tutorials/how-to-format-code-with-prettier-in-visual-studio-code-ja

TailwindCSS

https://tailwindcss.com/
https://devdojo.com/tails
https://gitpress.io/@rhistoba/about_tailwind
https://qiita.com/oedkty/items/68461080515ec1012980

https://stackoverflow.com/questions/47607602/how-to-add-a-tailwind-css-rule-to-css-checker
https://sunday-morning.app/posts/2020-10-25-next-js-tailwindcss
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Stylelint

https://stylelint.io/
https://qiita.com/y-w/items/bd7f11013fe34b69f0df
https://qiita.com/DesignChips/items/cd5282dba553026757c8

OGP

https://www.to-r.net/media/next-meta-tags/
https://t-cr.jp/memo/2201639257480a359
https://speakerdeck.com/line_developers/next-dot-js-was-chosen-server-side-ogp-generation-with-next-dot-js
https://lamlam.dev/posts/nextjs-chakraui-ogp

lottie

カスタムアニメーション作成でAfterEffectsを使わない場合アニメーションは限られるがlottiefiles経由で作れる。
https://github.com/airbnb/lottie-web
https://lottiefiles.com/
https://ryusou.dev/posts/lottieanimation

react-lottie

react向けのlottieライブラリ。（3年ぐらいメンテされてない）
https://github.com/chenqingspring/react-lottie
https://the2g.com/post/easy-animation-with-react-lottie
https://qiita.com/hirokik-0076/items/aa5913694dce3be24266

lottie-react

https://www.npmjs.com/package/lottie-react

lottie-react-web

https://www.npmjs.com/package/lottie-react-web

SSG

https://www.wakuwakubank.com/posts/771-react-nextjs-ssg/
https://qiita.com/thesugar/items/47ec3d243d00ddd0b4ed
https://mottox2.com/posts/468

microcms

https://zenn.dev/topics/microcms
https://zenn.dev/hiro08gh/articles/a953f46a839ee7
https://blog.microcms.io/custom-field-lp/
https://blog.microcms.io/microcms-next-jamstack-blog/
https://dev.classmethod.jp/articles/vercel-microcms-nextjs-blog/

環境変数

https://nextjs.org/docs/basic-features/environment-variables
https://qiita.com/KZ-taran/items/64cad61096cf45f18c24
https://blog.ojisan.io/next-env
https://vercel.com/docs/environment-variables
https://blog.ojisan.io/vercel-env

SWR

https://swr.vercel.app/docs/data-fetching
https://zenn.dev/mast1ff/articles/40b3ea4e221c36
https://zenn.dev/terrierscript/articles/2020-07-28-swr-react-query

getStaticProps

https://nextjs.org/learn/basics/data-fetching/implement-getstaticprops
https://nextjs.org/learn/basics/dynamic-routes/dynamic-routes-details
https://tech.playground.style/javascript/fetch-api-data/
https://note.com/fz5050/n/na1000bec85eb
https://reffect.co.jp/react/next-js#i-6

ConditionalWrapper

https://blog.hackages.io/conditionally-wrap-an-element-in-react-a8b9a47fab2
https://www.white-space.work/wrap-tags-by-condition-using-react/
https://digipress.info/tech/how-to-conditionally-wrap-element-in-react-jsx/

context API

https://ja.reactjs.org/docs/context.html
https://uncle-javascript.com/react-context-beginning
https://zenn.dev/luvmini511/articles/61e8e54853bc13
https://gotohayato.com/content/523/

React.FC

https://de-milestones.com/typescriptreact-fc/
https://qiita.com/sangotaro/items/3ea63110517a1b66745b

タグ変換

https://chaika.hatenablog.com/entry/2020/07/12/083000

    const Value = (value || "").split(/(\n)/).map((item, index) => {
      return <>{item.match(/\n/) ? <br /> : item}</>;
    });

https://hackmd.io/@euxn23/ByfD97Ujv