Next.js+TypeScriptの起動

この内容はnextです.jsとnext.js+typescriptを比較するために作成された
以下のようにして、基本的な設定とnextJS+typescriptの開発を学びます.
作業環境
OS : win10
Tool : vscode
デフォルト設定
NodeJSのインストール

Next.jsプロジェクトのインストール

命令語
-> npx create-next-app@latest(@最新<-最新バージョンのインストール)
->プロジェクト名ex):nextjs-intro
->コマンドnpm run devの実行
package.json確認

{
  "name": "nextjs-intro",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.1.4",
    "react": "18.0.0",
    "react-dom": "18.0.0"
  },
  "devDependencies": {
    "eslint": "8.13.0",
    "eslint-config-next": "12.1.4"
  }
}

実行画面

Next.js+Type Scriptプロジェクトのインストール

命令語
-> npx create-next-app@latest--typescript(最新バージョン@最新<-最新バージョンをインストール)
->プロジェクト名ex):nextjs-typescript
->コマンドnpm run devの実行
package.json確認

{
  "name": "nextjs-typescript",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.1.4",
    "react": "18.0.0",
    "react-dom": "18.0.0"
  },
  "devDependencies": {
    "@types/node": "17.0.23",
    "@types/react": "18.0.1",
    "@types/react-dom": "18.0.0",
    "eslint": "8.13.0",
    "eslint-config-next": "12.1.4",
    "typescript": "4.6.3"
  }
}

実行画面

プロジェクトの比較

各パッケージ.jsonの表示

同じところ

プロジェクトはすべてeslintがデフォルトでインストールされています.

相違点

NextJS
ファイル拡張子は

です.jsを使用して

を作成
Next.js + TypeScrtipt

typescriptに関連するファイルがさらにインストールされます.

ファイル拡張子は

です.tsxを使用して

を作成
それ以外は
各プロジェクトでnpm run devを実行する場合
デフォルトでは、最初に実行されるプロジェクトローカルサーバ
http://localhost:3000
次に実行するプロジェクトで
ポート番号はhttp://localhost:3001として自動的に指定され、実行されます.
各項目にポートが指定されていない場合でも、画面が自動的に指定されます.

ここまで問題なくついてきたのかな?
勉強の準備ができたら.
以上arenacast開発チーム
Kurt