特集2: 「Reactベースの柔軟・省設定フレームワーク いまどきNext.js」をやる
Vercel上の New Project – Vercel からNext.jsのテンプレートを作ろうとすると、 指定したリポジトリへのクローンのステップでこける。
仕方がないので、vercel CLIをダウンロードしてファイル一揃いをコピー。
npm i -g vercelDownload Vercel CLI – Vercelvercel init nextjs src
WSL2 Ubuntu 22.04上で作業。
npm run dev が Bus errorとだけメッセージを吐いて異常停止する。
→package-lock.json, node_modules, .next を削除して再試行すると成功。
'Bus Error' while running 'npm run build' or 'npm run dev' in Ubuntu 20.04 server : nextjs
tsconfig.json を作成して npm run dev すると勝手にTypeScript化してくれるはず……なのだが、何度指示に従っても npm install --save-dev @types/react をしろと繰り返される。
It looks like you're trying to use TypeScript but do not have the required package(s) installed.
Please install @types/react by running:
npm install --save-dev @types/react
If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).
おそらく同じバグ：
面倒なので一度消して
npx create-next-app@latest --ts
でやりなおす。
Basic Features: TypeScript | Next.js
WSL2（ホスト、Ubuntu）上: ログインユーザー
コンテナ上: root
の間の権限の不整合で、ホスト上からボリュームマウントに作成されるファイルを編集できなくなる。
以下の方法で解決。
ホスト上の /etc/docker/daemon.json に
{
"userns-remap": "default"
}を記述（nsはたぶん name space ）。
/etc/subuid と /etc/subgid にともに
dockremap:1000:65536
を追記。
docker-compose.ymlと同階層に.envファイルを作成して
USER_ID=1000
GROUP_ID=1000
を記述。
docker-compose.ymlに
volumes:
- /etc/passwd:/etc/passwd:ro
- /etc/group:/etc/group:ro
user: ${USER_ID}:${GROUP_ID}を追記。
Dockerを再起動。
docker-compose up -d でコンテナを立ち上げる。
- ユーザ名前空間でコンテナを分離 — Docker-docs-ja 19.03 ドキュメント
- Tavi's Travelog - Dockerでのホストとコンテナの権限問題について
- 宇宙の晴れ上がり: Ubuntu 18.04のDockerでUser remapを使う
- Declare default environment variables in file | Docker Documentation
- dockerでvolumeをマウントしたときのファイルのowner問題 - Qiita
- bash - How to set uid and gid in Docker Compose? - Stack Overflow
↑解決していなかった。npm installで/home下にディレクトリを作ろうとするが、root権限が無くてこける。
docker-compose.ymlに
privileged: trueを追記する。うまくいく。
サンドボックス化を破るので良くないという説を見たが今は考えない。
↑解決していなかった2。どうしてうまくいったと思ったのだろう。
そもそも id dockremap で設定した値が出ない。実体はDocker desktopだから純粋なDockerと勝手が違う？
Ubuntuのログインユーザーをrootにすれば良い説があるが、最終的にWindows側で作業することに。
Windows側のログインユーザーとコンテナ内のrootのマッピングが機能していて、ユーザーを追加しなくても権限回りで怒られなくなった。
- Personal access tokens
- Generate new token
- Note > 適当に
- ✅repo ✅user
- Generate token
- コピーして.env.local（.gitignoreすること）の
GITHUB_ACCESS_TOKENに貼りつけ
- Developer applications
- New OAuth App
- Homepage URL, Authorization callback URLにホームページURLを追記（開発環境用なら
http://localhost:3000） - Refister application
インスタンスをexportして使いまわす。
export const octokit = new Octokit({ auth: process.env.GITHUB_ACCESS_TOKEN });ビルド時の静的生成が不要な場合、戻り値の paths は完全に空で良い。fallback: true だけ指定。
next/router の router からフォールバック状態かどうか判定できる。
import { useRouter } from 'next/router'
const Page = (props:PageProps) => {
const router = useRouter()
if(router.isFallback){
return <Loading />
}
//略
}NextAuth.js · Authentication for Next.js
記事公開以後にメジャーアップデートがありv4が出ている。
[next-auth][warn][nextauth_url]
https://next-auth.js.org/warnings#nextauth_url NEXTAUTH_URL environment variable not set