/reportify-frontend

Primary LanguageTypeScript

reportify frontend

CI Deploy version

開発環境

  • Node.js 18
  • Next.js 13

開発サーバの起動

起動に成功すると localhost:3000 からアクセスできます。

$ npm run dev

###ビルド方法

ビルドに成功すると out 直下に静的コンテンツが生成されます。

$ npm run build
$ npm run export

REST API のモックサーバを起動

起動に成功すると localhost:8080 から openapi.yml に定義された REST API を利用できます。

$ docker run --rm -it -p 8080:4010 -v $PWD:/tmp stoplight/prism:4 mock -h 0.0.0.0 /tmp/openapi.yml

コードアーキテクチャ

参考：https://github.com/wadeen/nextjs-blog/tree/main

  • src/components: ボタンなどのUIコンポーネントを保存する場所
  • src/entities: (主にAPIから渡ってくる)データモデルを定義
  • src/hooks: 各ページやコンポーネントで使用するカスタムReact Hooksを定義
  • src/pages: 各ページ用のファイルを格納
    • _app.tsxと_document.tsx以外はファイルパスを元にURLエンドポイントが設定される
  • src/services: APIとの通信や、データを加工する処理などの処理を格納
  • src/stores: 主にRecoilで扱うグローバルStateを格納
  • src/styles: CSSを格納
  • src/utils: 共通で使えるメソッドやツールを定義