quo1987

<p>これでテンプレートのディレクトリが作成される。</p>
<div class="code-block-container"><pre><code>$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.1.0
Ok to proceed? (y) y
✔ What is your project named? … image-viewer
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/takah/project/nextjs-viewer/image-viewer.
</code></pre></div>

<p>アプリのローカル起動</p>
<div class="code-block-container"><pre><code>npm run dev
</code></pre></div>

<p>ローカル用に環境変数を利用するには<code>.env.local</code>を作成する。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">.env.local</span></div>
<pre class="language-property"><code class="language-property">ENV_KEY=envvalue
</code></pre>
</div>

<p>プロダクション用の起動はビルド→アプリケーション起動の手順が必要。</p>
<div class="code-block-container"><pre><code>$ next build # or npm run build
$ next start # or npm run start
# ポートを指定する場合
$ next start -p 8080
</code></pre></div>