Zenn
🐶

Next.jsとTailwindを使ってWebアプリを作ってみた -Step1- Next.jsを始めてみる

2024/11/13に公開
Next.js
React
Vercel
Tailwind CSS
tech

今回はJavascriptのフレームワークであるNext.jsを使って簡単なWebサイトを作っていきたいと思います。今回はあくまで学習用に作ってみるだけなので、まずは簡単にどこをいじればどんなふうに動くのかを確認していきたいと思います。

実行環境

PCはMacでVscodeで動かしていきます！
また事前準備として、Mac bookにnode.jsをインストールしておきます！
node.jsはjavascriptを動作させるためのランタイム環境のことです！
https://nodejs.org/en/

Next.jsのはじめ方

こちらの手順に従って実行していきます。
https://nextjs.org/docs/app/getting-started/installation#run-the-development-server

まずは学習用のフォルダーを作成して、その配下で以下のコマンドを実行します。

npx create-next-app@latest
What is your project named? study-react
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 your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

選択肢に関しては、study-reactというプロジェクト名にして、その他は全てYesで実行しました。

その上で、以下のnpmコマンドでアプリを実行してみます。

% npm run dev

> study-react@0.1.0 dev
> next dev --turbopack

   ▲ Next.js 15.0.3 (Turbopack)
   - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 748ms

すると以下のような画面がブラウザ上で立ち上がっているのが確認できました。

開発環境の立ち上げに関しては、npm run dev でOKです。

本番環境の時の起動方法

続いて本番環境用のときにどのように起動するのかというと、
① ビルド (npm run build)
② スタート (nmp run start)
という2 step でやっていきます！

 % npm run build

> study-react@0.1.0 build
> next build

   ▲ Next.js 15.0.3

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
 ✓ Generating static pages (5/5)
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (app)                              Size     First Load JS
┌ ○ /                                    5.46 kB         105 kB
└ ○ /_not-found                          896 B           101 kB
+ First Load JS shared by all            99.9 kB
  ├ chunks/4bd1b696-80bcaf75e1b4285e.js  52.5 kB
  ├ chunks/517-d083b552e04dead1.js       45.5 kB
  └ other shared chunks (total)          1.88 kB


○  (Static)  prerendered as static content

このビルドをすることで、本番環境向けのファイルが作成されます。

ビルドされたファイルを起動するコマンドがnpm run startになります。
以下のように実行します。

 % npm run start

> study-react@0.1.0 start
> next start

   ▲ Next.js 15.0.3
   - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 366ms

http://localhost:3000にアクセスしてみると

このように起動することができました。

Vercelでコードをホストしてみる

Vercelの使い方については、こちらを参照してください。
https://zenn.dev/delacroix/articles/ff4ca831e7dda5

先程まではローカルで起動していたWebページでしたが、Vercel上で以下のように起動することができました。

Discussion