Open11

React & Next.jsの素振り

らんす🍐らんす🍐
% npx create-next-app --ts     
✔ What is your project named? … my-app
Creating a new Next.js app in /Volumes/Data/Repository/github/next-trials/my-app.

Using npm.

Installing dependencies:
- react
- react-dom
- next


npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

added 268 packages, and audited 269 packages in 11s

44 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Installing devDependencies:
- eslint
- eslint-config-next
- typescript
- @types/react


added 224 packages, and audited 493 packages in 20s

78 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Success! Created my-app at /Volumes/Data/Repository/github/next-trials/my-app
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd my-app
  npm run dev
%npm run dev

> my-app@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
event - compiled successfully
らんす🍐らんす🍐

style系

  • css modules branch
    • 個人的に一番手に馴染むけど、落ち目らしい?
  • styled-component
  • emotion branch
    • 型セーフ
    • styleのマージ楽。(clsx不要)
      • propsでもらったcssのマージわからん
    • first-childでハマる。
    • nth-of-type系が何故かきかなかった
  • linaria branch
    • emotion風とstyled-component風があるらしい
    • css moduleと共存させるのは一工夫必要そう
    • classNameを使うのでemotionより好み
    • babel/core入れなくてもよくなってる?
  • tailwind
らんす🍐らんす🍐

store系

  • context api branch
    • 非同期がなければこれで十分(そもそも状態管理に非同期とかある?)
  • recoil branch
    • グローバルなuseState( = context api?)
    • 非同期対応
  • jotai branch
  • redux-toolkit