参照

今回では、Create a Next.js Appではなく、DocumentationのGet Startを参考して、構築しに行く
※こちらも掲示しています。

Next.jsのインストール..

requirements

node (>= 14.6)
yarn (1.22)：npm npxもよい、お好みで
MacOS, Windowsm Linux

自動か、手動でsetup & run nextjs

自動 yarn create next-app
↑　今回はこちらにしました、コマンドプロンプトからいろいろきかれますが、今回は全部yes
手動 yarn add next react react-dom
run yarn dev

optional for vscode launcher: set up vscode launch.json

in {work space}/.vscode/launch.json copy following source

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "yarn dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

DIRは、下記図の通り。

Cypressでテスト（e2e only）

cypress

End-to-End (E2E) ：今回はこちらのみ
Component Testing
yarn add & run

run cypress: yarn run cypress
choose left one
choose Chrome and commit with the green bottom below
choose the source just added which was app.cy.js
run the test