[Next.js]Zero config関連

Zero config

Next.jsに接触し始めたばかりの頃はcreate-next-appが提供するボイラプレートを使用していましたが、Next.jsの長所の一つであるZero configを知りたいのですが、手動で環境を最初から設定したいのです.
まず、$ npm initを梱包します.jsonを生成します.
必要なパッケージをインストールします$ npm install react react-dom nextその後、いくつかのコードを作成して実行すればいいので、公式ファイルで提供されているコードを使用します.
コードの位置はルートから/pagesパス内で生成されます.

// pages/index.tsx

import { useState } from 'react';

function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>
}

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton']

  const [likes, setLikes] = useState(0)

  function handleClick() {
    setLikes(likes + 1)
  }

  return (
    <div>
      <Header title="Develop. Preview. Ship. 🚀" />
      <ul>
        {names.map(name => (
          <li key={name}>{name}</li>
        ))}
      </ul>

      <button onClick={handleClick}>Like ({likes})</button>
    </div>
  )
}

export default HomePage;

スクリプトを作成して実行できます.

"scripts": {
  "dev": "next dev"
},

また、$ npm run devコマンドから開始することもできますが、ここでタイプスクリプトを使用する場合は、追加する必要があります.$ touch tsconfig.jsonを使用して空のファイルを生成し、typescriptに関連するコンパイルを設定します.
そして今$ npm run dev命令で終わります.ただしtypescript関連のパッケージはまだインストールされていないため、nextはインストールする必要があるものを親切に教えてくれます.

私に教えてくれたnpm install --save-dev typescript @types/react @types/nodeコマンド語を使用して、追加のパッケージをインストールします.
では、かばんです.jsonの様子は以下の通りです.

// package.json

{
  "name": "self-next",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next dev"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^12.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/node": "^17.0.21",
    "@types/react": "^17.0.40",
    "typescript": "^4.6.2"
  }
}

そして本当に$ npm run devコマンドを実行すると次は自動的にtsconfigを実行しますjsonを発見しtsconfigを行った.jsonとnext-env.d.tsファイルを生成し、タイプスクリプトに関する設定を理解して設定し、以下に示すように正常に実行します.

最終的なディレクトリ構造は次のとおりです.

実際、reactではcraなしでここまで実行するためには、webパッケージに関するインストールや設定などの作業がたくさん必要で、タイプスクリプトに設定するものがたくさんあるので、上記の手順を考えてみると、本当に簡単に実行できるのかと驚きました.

Reference

https://nextjs.org/learn/foundations/from-react-to-nextjs/getting-started-with-nextjs

https://nextjs.org/docs/basic-features/typescript