nextjs

レビューは勉強になる 最近案件が立て込んでいるのは6月のまとめに書いたんだけど、結果いくつかのプロジェクトで実装ではなく、ただのレビューアーと化している。 実装がしたいって今まで強く思っていた。 実装が実力を伸ばす唯一の手段だと思っていたけど、レビューも真剣にやればすごい勉強になることに気が付いた。 というのもレビューするには、まずコードをしっかり読まなければならないし、知らないプラグインとの出会いがあり、それを調べることで相当勉強になる。 で、今回出会ったのが、class-variance-authorityというプラグイン。 class-variance-authorityとは?? 簡単に言うとvariantsを定義して条件分岐をわかりやすくするもの。 公式にあるbuttonコンポーネントの例がわかりやすい。 import React from "react"; import { cva, type VariantProps } from "class-variance-authority"; const button = cva("button", { variants: { intent: { primary: [ "bg-blue-500", "text-white", "border-transparent", "hover:bg-blue-600", ], secondary: [ "bg-white", "text-gray-800", "border-gray-400", "hover:bg-gray-100", ], }, size: { small: ["text-sm", "py-1", "px-2"], medium: ["text-base", "py-2", "px-4"], }, }, compoundVariants: [{ intent: "primary", size: "medium", class: "uppercase" }], defaultVariants: { intent: "primary", size: "medium", }, }); export interface ButtonProps extends React....

フロントエンドを開発するときにバックエンドサーバ―の用意ができていない時がよくある。 今までは側だけ作って待機していたが、せっかくなのでモックサーバーを立ち上げ、バックエンドができ次第、URLの向きを変え、完成！ という風に出来ればと思いモックサーバーの立ち上げを調べてみた。 json-server まずはjson-serverを使おうと思ったけど、同じエンドポイントでGet、Postが分けられなさそうということで不採用にした。けど、よくよく落ち着いて調べてみるとできるかもしれない。 いつか機をみて使ってみたい。 が、今回は上記の通り不採用した。 app/api 次に、そもそもnextjsにはAPIを作る機能があるじゃないかと思いだし、それを活用することにした。 ついでにAPI仕様書も作れればなおいいということで調べてみると、next-swagger-docというものがあった。 これでAPIを作成し、しかもSwaggerを作成できると舞い上がり実装してみた。 実装 npm i next-swagger-doc npm i swagger-ui-react まずはインストールする。 ちなみにバージョンは下記の通り。 "next": "14.2.3", "next-swagger-doc": "^0.4.0", "react": "^18", "swagger-ui-react": "^5.17.14" lib/swagger.tsに下記をコピペする。 import { createSwaggerSpec } from "next-swagger-doc"; export const getApiDocs = async () => { const spec = createSwaggerSpec({ apiFolder: "app/api", // define api folder under app folder definition: { openapi: "3.0.0", info: { title: "Next Swagger API Example", version: "1.0", }, components: { securitySchemes: { BearerAuth: { type: "http", scheme: "bearer", bearerFormat: "JWT", }, }, }, security: [], }, }); return spec; }; ※以降先頭行がファイル名になっている。...

Dockerで環境構築したファイルを変更してもブラウザで表示が変更されない そもそも作成した環境は下記記事の通り。 DockerでnextJsとnestJsの環境構築をする で、色々検証してみた結果、Dockerを止め、再度立ち上げれば更新されているということが分かった。原因が分かった、これで一件落着とはならない。 何でも不便すぎる。 そこでホットリロードが効くように調査してみた。 結論（いったん諦める） フロントエンドに限り、ブラウザを更新すれば、表示が更新されることは確認できた。 フロントエンド（NextJs） フロントエンド（NextJs）側の設定は、docker-compose.ymlに下記変更を加えたらホットリロードが効くようになった。 frontend: build: context: . dockerfile: ./docker/frontend/Dockerfile tty: true volumes: - type: bind source: ./frontend target: /app + environment: + - WATCHPACK_POLLING=true ports: , "3333:3333" …ただめちゃくちゃ重い。 何回かやっていると、なんかうまくいかなくなったので、 上記の追加分を削除し、下記で対応した。 next.config.jsに下記を追加。 webpackDevMiddleware: config => { config.watchOptions = { poll: 1000, aggregateTimeout: 300, } return config }, これで同じく重いけど、リロードに対応した。 ホットリロードにも対応しているようだけど、Dockerが重すぎてわからない。 バックエンド（NestJs） NestJsを色々調べてもよくわかなかったので、Dockerについて調べると、下記記事を見つけた。 Dockerを使っていてhot reload系が効かなかったとき この１つ目「wsl上にファイルを置いていない」が該当したので、確認してみることにした。 が、これがなかなか厄介で大変な気がする。 もっと簡単そうなのが、 env CHOKIDAR_USEPOLLING=true をDockerfileに記述する。 あるいは、 environment: - CHOKIDAR_USEPOLLING=true をdocker-compose.ymlに追記するというもの。...

NextJsとNestJsをDockerで立ち上げる あくまでもDockerのハンズオンなので別に何でもいいのだが、どうせならということで、次に考えている構成でやってみることにした。 ちなみに【環境構築】NestJS+Next.js+TypeScript+Dockerの環境構築ハンズオンに倣うようにすすめていくので、こちらの記事を参考にした方がいいかもしれない。 docker-compose.ymlファイルを作成する プロジェクトのルートでdocker-compose.ymlファイルを作成する。そのために下記コマンドを実行する。 touch docker-compose.yml 実行後、docker-compose.ymlという名前の空ファイルができていることを確認することができる。 このファイルにDockerの設定を書いていく。 version: "3.7" services: backend: build: context: . dockerfile: ./docker/backend/Dockerfile tty: true volumes: - type: bind source: ./backend target: /api ports: , "3000:3000" 設定内容は把握できていないが、これでバックエンドのdocker-compose.ymlが作成できたらしい。 まずはバックエンドのみで起動するためフロントエンドの設定は書かない。 バックエンドの設定 それではバックエンド、つまりNestJs側の設定をすすめていく。 Dockerファイルの作成 設定ファイルに書いた dockerfile: ./docker/backend/Dockerfile で指示したディレクトリを作成する。 mkdir docker cd docker mkdir backend 作成したディレクトリにDockerfileを作成する。 cd backend touch Dockerfile 作成が完了したら以下の内容を記述する。 FROM node:16.18.0 WORKDIR /api CMD ["npm", "run", "start"] ちなみにnodeのバージョンは参考にした記事の通りではなく、なんとなく現在他案件で使用しているバージョンにしてみた。 ↓のちに下記に変更した（よくわからないけど）。 FROM node:16-alpine3.16 これでDocker側の設定は完了。 NestJsをインストールする 次にNestJsをインストールする。 cd ../.. プロジェクトのルートに戻り、nest newを実行※１する。...