DOAP2023開発日記 #2

Next.jsのひな形作成

クライアントWebアプリのバックエンド側を作ったので、フロントエンド側を作る。

$ npx create-next-app --ts
npx: 1個のパッケージを1.865秒でインストールしました。
✔ What is your project named? … client2023
Creating a new Next.js app in /.../client2023.

Using npm.

Installing dependencies:
- react
- react-dom
- next

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-linux-x64-musl@12.1.6 (node_modules/next/node_modules/@next/swc-linux-x64-musl):
...

+ react@18.2.0
+ react-dom@18.2.0
+ next@12.1.6
added 14 packages from 43 contributors and audited 25 packages in 8.497s

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

found 0 vulnerabilities


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


> core-js-pure@3.23.1 postinstall /.../client2023/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-android-arm-eabi@12.1.6 (node_modules/@next/swc-android-arm-eabi):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-android-arm-eabi@12.1.6: wanted {"os":"android","arch":"arm"} (current: {"os":"darwin","arch":"x64"})
...

+ @types/react-dom@18.0.5
+ @types/node@18.0.0
+ eslint@8.18.0
+ eslint-config-next@12.1.6
+ typescript@4.7.4
+ @types/react@18.0.14
added 214 packages from 184 contributors and audited 240 packages in 29.209s

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

found 0 vulnerabilities


Initialized a git repository.

Success! Created client2023 at /.../client2023
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 client2023
  npm run dev

$ cd client2023

動作確認

$ npm run dev

http://localhost:3000にアクセスする。

Next.jsの初期画面

動作確認ができたら、Ctrl+Cで抜ける。

CHANGELOG.md追加

$ touch CHANGELOG.md

CHANGELOG.mdを以下のように編集する。

# 変更ログ

## [master] 0.0.0.0-2022.06.18

* 新規作成。

ソースコードをコミット

Gitでコミットする。ちなみに、Next.jsのcreate-next-appはGitを初期化してくれているので、git initをする必要がない。ユーザ名とEメールアドレスだけConfigに加えて、コミットする。

$ git config user.name "Takahide Kondoh"

$ git config user.email tkondoh@chiburu.com

$ git add -A

$ git commit -m 0.0.0.0-2022.06.18
[main 22dbb93] 0.0.0.0-2022.06.18
 1 file changed, 5 insertions(+)
 create mode 100644 CHANGELOG.md

まとめ

Next.jsでは、REST APIをクライアント側でも模倣開発することができるが、OAuth2をテストするのに模倣されても困る(直接Dominoサーバとやり取りしたい)ので、あとでhttp-proxyを取り入れて、APIを直接バックエンドに送れるようにする。