Azure Static Web AppsでNext.js

Next.jsはReactをベースにしたフロントエンドフレームワーク

$ npx create-next-app nextjs-pages --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

$ cd nextjs-pages
$ npm run dev

http://localhost:3000

gitリポジトリを作成して、
GitHub - hiroyuki12/nextjs-pages

$ git remote add origin git@github.com:hiroyuki12/nextjs-pages.git
$ git branch -M main
$ git push -u origin main

$ vi next.config.js して

module.exports = {
  trailingSlash: true,
  exportPathMap: function() {
    return {
      '/': { page: '/' }
    };
  }
};

$ vi package.jsonして、scriptsのbuildを変更。&& next export を追加。

"scripts": {
  "dev": "next dev",
  "build": "next build && next export",
},

$ npm run build

$ git add .
$ git commit -m "Update build config"
$ git push

Azure Portalを開いて、
Static Web Appsを作成
作成したリポジトリを選択
[Build Details](ビルドの詳細) セクションで [Build Presets](ビルドのプリセット) ドロップダウンから [Custom](カスタム) を選択
[App location](アプリの場所) ボックスに「 / 」と入力
[Output location](出力の場所) ボックスに、「out」と入力
作成するとデプロイされる。

デプロイの進捗は、GitHubのActionsで確認できる。

https://white-cliff-02df46e00.azurestaticapps.net

変更して、Git Pushすると、Azure Static Web Appsが更新される。

チュートリアル:静的にレンダリングされた Next.js の Web サイトを Azure Static Web Apps にデプロイする | Microsoft Docs

Next.jsをAzure Web Apps にデプロイする - Qiita