https://github.com/oumelab/nextjs-microcms-book-practice
学習 / 翔泳社 『Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた』
https://github.com/oumelab/nextjs-microcms-book-practice
microcms nextjs practice
Last synced: about 2 months ago
JSON representation
学習 / 翔泳社 『Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた』
- Host: GitHub
- URL: https://github.com/oumelab/nextjs-microcms-book-practice
- Owner: oumelab
- Created: 2025-03-22T10:49:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-22T14:36:39.000Z (over 1 year ago)
- Last Synced: 2025-03-22T15:29:53.918Z (over 1 year ago)
- Topics: microcms, nextjs, practice
- Language: TypeScript
- Homepage:
- Size: 59.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 翔泳社 『Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた』
書籍の学習用リポジトリです。
- Next.js v15
- React v19
- Bun v1.1.43
## 8章-6 Basic認証を設定してみよう
### Middlewareとは
`Middleware` の処理を確認する
プロジェクトルートに `middleware.ts` を作成
```TypeScript
import { NextRequest, NextResponse } from "next/server"
export function middleware(request: NextRequest) {
console.log("middleware: " + request.url);
return NextResponse.next();
}
export const config = {
matcher: "/members/:path*",
};
```
### Basic認証の設定
1. `nextjs-basic-auth-middleware` をインストール
```shell
bun add nextjs-basic-auth-middleware
```
2. `middleware.ts` を修正
書籍のコードだと、自分の環境ではローカルでは動作したが、Vercelにデプロイしたら動作しなかった。なので下記に変更して動作した。
```TypeScript
import { createNextAuthMiddleware } from "nextjs-basic-auth-middleware";
export const middleware = createNextAuthMiddleware({
users:[{
name: process.env.BASIC_AUTH_USERNAME || "",
password: process.env.BASIC_AUTH_PASSWORD || "",
}],
});
export const config = {
matcher: ['/(.*)'],
};
```
3. `.env.local` に環境変数を追記
```
BASIC_AUTH_USERNAME=admin
BASIC_AUTH_PASSWORD=password
```