npm ciルートディレクトリに .env.local という名前のファイルを作成し、Gemini APIキーを設定してください
API_KEY="XXXXXXXX"npm run devhttp://localhost:3000 で開きます。
npm run formatでコードを整形します。
npm run lintでコードをチェックします。出てくるwarningやerrorはできるだけ直しましょう。
```言語名-repl
>>> コマンド
実行結果例
```
でターミナルを埋め込む。
- ターミナル表示部は app/terminal/terminal.tsx
- コマンド入力処理は app/terminal/repl.tsx
- 各言語の実行環境は app/terminal/言語名/ 内に書く。
- 実行結果はSectionContextにも送られ、section.tsxからアクセスできる
```言語名:ファイル名
ファイルの内容
```
でテキストエディターを埋め込む。
- app/terminal/editor.tsx
- editor.tsx内で
import "ace-builds/src-min-noconflict/mode-言語名";を追加すればその言語に対応した色付けがされる。 - 編集した内容は app/terminal/file.tsx のFileContextで管理される。
- 編集中のコードはFileContextに即時送られる
- FileContextが書き換えられたら即時すべてのエディターに反映される
- 編集したファイルの一覧はSectionContextにも送られ、section.tsxからアクセスできる
```言語名-readonly:ファイル名
ファイルの内容
```
で同様にテキストエディターを埋め込むが、編集不可になる
```言語名-exec:ファイル名
実行結果例
```
で実行ボタンを表示する
- 実行ボタンを押した際にFileContextからファイルを読み、実行し、結果を表示する
- app/terminal/exec.tsx に各言語ごとの実装を書く (それぞれ app/terminal/言語名/ 内に定義した関数を呼び出す)
- 実行結果はSectionContextにも送られ、section.tsxからアクセスできる
- Next.js
- 検索する際は「App Router」を含めることで古い記事に惑わされることが少なくなります。
- OpenNext
- DaisyUI / Tailwind CSS
- buttonやinputやメニューなどの基本的なコンポーネントのデザインはDaisyUIにあるものを使うと楽です
- 細かくスタイルを調整したい場合はTailwind CSSを使います (CSS直接指定(
style={{...}})よりもちょっと楽に書ける) - よくわからなかったらstyle直接指定でも良い
- SWR
- react-markdown
- REPL・実行結果表示: xterm.js
- コードエディター: react-ace
- それ以外のコードブロック: react-syntax-highlighter