.NetCore3.1＋Next.js＋TypeScriptの環境構築

構成

業務で下記構成でWebアプリケーションを開発中です。初期構築したときの手順をちょっとまとめさせてください。

• サーバ側
  • WindowsSever2019
  • .NetCore3.1
  • IIS
• フロント側
  • node.js 12.8.0
  • Typescript 3.9.7
  • next.js 9.4.4

サーバ側

「DotNetTest」という名前の.NetCore3.1のAPIプロジェクトを作成します。

dotnet new webapi --framework netcoreapp3.1 --output DotNetTest

DotNetTest
│  appsettings.Development.json
│  appsettings.json
│  DotNetTest.csproj
│  Program.cs
│  Startup.cs
│  WeatherForecast.cs
│
├─Controllers
│
├─Properties
│      launchSettings.json
│
├─Content
│  └─frontend
│
└─wwwroot

静的ファイルを提供するミドルウェアを登録します。

Startup.cs

// Configureメソッド内
app.UseDefaultFiles();
app.UseStaticFiles();

Content/frontendにNext.jsのソースを格納し、wwwrootにコンパイル後のコードを格納する形にしたいと思います。

フロント側

作ります。

mkdir Content
cd Content
npx create-next-app frontend
cd frontend
npm install --save-dev typescript @types/react @types/node
touch tsconfig.json
npm run dev

package.jsonを書き換えます。scriptsに下記文言を追加しました。

package.json

"build": "next build && next export -o ../../wwwroot",

npm run buildして終わり、簡単でございました。