# 20241123_Next.jsでWebアプリを作ろう！！
(例：20210901_LT会を開催しました)
###### tags: `ブログ記事`

- [ ] 公開（ブログ公開担当者がいじるやつ）

太字斜体で書いてある内容を埋めて行ってください．
文章，画像は太字斜体の下の行に入れてください．
最初に書く時はREADMEを読んだら読むといいと思います．

<br>

## 表示されない情報
***書いた人の名前(自己紹介文と同じ名前)***
{
うっちー
}

***記事の簡単な説明(検索した時にタイトルの下に出てくる文章)***
{
Next.jsを触り始めて1~2カ月くらいの素人がNext.jsでWebアプリを作る際の流れをまとめてみました！
誰でも簡単にWebアプリをデプロイできるんやでっていうことを伝えたい。
}

<br>

## 表示される部分
***サムネイル画像***
{

}

***カテゴリ***
以下の中から該当しそうなカテゴリを選択してください
※一つだけ選択してください
- [ ] 対外活動
- [x] 活動の様子
- [ ] メンバーの趣味
- [ ] 実務訓練体験記
- [ ] NUTMEG Advent Calendar 2023

***タグ***
以下の中から該当しそうなカテゴリを選択してください．当てはまる物がない場合は適宜追加してください.
言語
- [ ] HTML
- [ ] CSS
- [ ] Python
- [ ] Go
- [ ] Ruby
- [x] JavaScript
- [x] TypeScript
- [ ] Dart
- [ ] Rust
- [ ] Kotlin
- [ ] Swift

フレームワーク・ライブラリ
- [ ] Ruby on rails
- [ ] Vue.js
- [ ] Nuxt.js
- [ ] React.js
- [x] Next.js
- [ ] Gin
- [ ] Flluter

ツール
- [x] GitHub
- [x] ターミナル
- [ ] WSL
- [ ] Ubuntu
- [ ] Docker
- [ ] Raspberry Pi
- [ ] Figma

分野
- [ ] チームづくり
- [x] フロントエンド
- [ ] バックエンド
- [ ] インフラ
- [ ] Web-design
- [ ] API関係

---

***以下に本文を記載してください***

## そうだ！Webアプリ作ろう！
お疲れ様です！うっちーです！

夕飯を食べているとふとこんなことを思うことがあると思います！
「あ～...
　なんかWEBアプリ作りてぇなぁ～」
しかし！まだプログラミングを勉強して間もない人にはWEBアプリってどうやって作れば良いのか分からないと思います！

### 僕もわかりません！！

ということで今回は、そんな素人が最近覚えたNext.jsでWEBアプリを作る方法を書き殴っていこうと思います！

なお、本記事の目的は「最低限WEbアプリを公開できること」としたいと思います！
そのため、使用技術に関しても詳しい解説などはしません！

「よく分かんないけど、こうすれば良いのか～」って感じで受け取ってもらえると幸いです！
個人的に、小難しいことは後にしてまずはゴリゴリプログラムを書いていく方が楽しいと思ってます！
「は？ちゃんと解説しろや」とか「いやこれ絶対もっと上手くやれるやろ」とか思ったら、技術や知識は自然とググると思います。
(最近のマイトレンドはchat GPTにぶん投げること)

その他、ズブの素人が書いているため所々終わっている記述があるかと思われます。ご了承ください。

## ～今日のお品書き～
1. Next.jsプロジェクトを作成しよう！
2. GitHubにリポジトリを作ろう！
3. Vercelで公開しよう！

## 1. Next.jsプロジェクトを作成しよう！
まずは[Next.js](https://nextjs.org/)[^1]プロジェクトを作成しましょう！
(このプロジェクトがWEBアプリになるイメージ)

Next.jsというのはJavaScript[^2]のフレームワーク[^3]です！
「なんか良い感じにWEBアプリの骨組みになってくれるやつなんだなぁ」と思っておいてください！

### (1) ターミナルを開く
まずはターミナルを開きましょう！
(ターミナルだかコマンドラインだかコマンドプロンプトだか言われるてるやつ)

↓こんなやつ

### (2) Node.jsとnpmとnpxをインストールする
次はNext.jsプロジェクトを作るのに必要となる「Node.js」[^4]と「npm」[^5]と「npx」[^6]というものをインストールします！
(既にインストールされている人はスキップしてください)

1. Node.jsのサイトにアクセスする
リンク: https://nodejs.org/en
2. 最新バージョンをダウンロードする
「Download Node.js(LTS)」というボタンをクリック
3. ダウンロードしたファイルを開いてインストールする
インストール時のオプションは全部デフォルトでOK

Node.jsをインストールするとnpmとnpxも一緒にインストールされます！

### (3) Node.jsとnpxとnpmがインストールされているか確認する
「Node.js」と「npm」と「npx」が自分のパソコンにインストールされているか確認しましょう！
(既にインストールされている人はスキップしてください)

インストールされているか確認するには、ターミナルで次のコマンドを実行してください！

1. Node.jsがインストールされているか確認するコマンド

    node -v

-->「v20.16.0」などの表示が出たらインストール済み！
2. npmがインストールされているか確認するコマンド

    npm -v

-->「10.8.2」などの表示が出たらインストール済み！
3. npxがインストールされているか確認するコマンド

    npx -v

-->「10.8.2」などの表示が出たらインストール済み！

### (4) Next.jsプロジェクトを作る
「Node.js」と「npm」と「npx」がインストールできたらNext.jsのプロジェクトを作りましょう！
# コマンド1個で作れます！
1. Next.jsプロジェクトを作成したいフォルダに移動する
2. 次のコマンドを実行してNext.jsプロジェクトを作成する

    npx create-next-app myApp

これだけでNext.jsのプロジェクトが作成できます！
「myApp」の部分がプロジェクトの名前になります。好きな名前を付けましょう！
(半角文字じゃないとエラー出るかも)
3. 色々聞かれるので対応する
先程のコマンドを実行するとこんな質問が来ると思います。
基本的に**最初だけ「y」と入力したら後は全部エンター**で良きです！
- Ok to proceed? (y) : 「次に進んで大丈夫？」
--> 「y」と入力してエンター
- Would you like to use TypeScript?: 「TypeScript使う？」
-->YesでOK
- Would you like to use ESLint?: 「ESLint使う？」
-->YesでOK
- Would you like to use TailWind CSS?: 「TailWindCSS使う？」
-->YesでOK
- Would you like to use `src/` directory?: 「srcディレクトリ作る？」
-->YesでOK
- Would you like to use App Router?: 「AppRouter使う？」
-->最初はNoがオススメ！
- Would you like to customize the default import alias(@/*)?: 「エイリアスをカスタマイズする？」
-->NoでOK
参考: [create-next-appで訊かれていること](https://zenn.dev/ikkik/articles/51d97ff70bd0da)

### しばらく待つとNext.jsのプロジェクトが作成されます！
おめでとう！
これで君はこれからはコマンド1つでNext.jsのプロジェクトが作れるぞ！

## 2. GitHubにリポジトリを作ろう！
次は先ほど作成したNext.jsプロジェクトをGitHub[^7]のリポジトリにプッシュしましょう！

GitHubというのはアプリの共同開発などで絶対と言って良いくらい使われている開発プラットフォームです！
色々と便利な機能はありますが、ここでは「Next.jsのプロジェクトをVercelってやつでWEBで一般公開するために必要なやつ」と思っておいてください！

### (1) GitHubアカウントを作ろう！

https://github.co.jp/

### (2) GitHubにリポジトリを作ろう！

### (3) リポジトリにNext.jsプロジェクトをpushしよう！
notion: https://www.notion.so/nutfes-nutmeg/github-10adb129560c40adb0b45f24f8fc2fa5?pvs=4

## 3. Vercelで公開しよう！
[Vercelにデプロイしよう](https://www.notion.so/nutfes-nutmeg/vercel-54e647a3be7246e39e858ac8eca8af99?pvs=4)

### (1) VercelにGitHubアカウントでログイン

### 解説

[^1]:Next.jsというのはJavaScriptのフレームワークのことです！
WEBアプリやWEBサイトの開発で最近人気らしい。

[^2]:WEBアプリの基本的なプログラム言語として、「HTML」 「CSS」 「JavaScript」の3つがあります！
【HTML】
アプリ内の各要素の"構造"を定義する(ボタンの中に文字を入れる等)
【CSS】
アプリ内の各要素の"見た目"を定義する(文字の大きさや色など)
【JavaScript】
アプリ内の各要素の"処理"を定義する(ボタンを押したらリンクを開くなど)
↓
もっと詳しく知りたい方はMDNの解説がおススメです！
HTML: [HTMLの基本](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics)
CSS: [CSSの基本](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics)
JavaScript: [JavaScriptの基本](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics)

[^3]: フレームワークとは文字通り「枠組み」です。プログラムを作る際に、1から全部作るのは大変です。その辺の面倒を予めよしなにしてまとめてあるがフレームワークです。
例：車を作る際に、1から車を作るのではなく、骨組み(=フレームワーク)から作る感じ

[^4]: Node.jsというのは、JavaScriptの便利な拡張機能がいっぱい使えるようになるやつです！
実態は「JavaScriptの実行環境」らしいです。
JavaScriptは元はGoogleChromeなどのブラウザ上でしか実行できなかったのですが、Node.jsはそれを自分のPCでも動かせるようにしてくれた(らしい)！その結果、技術力を持て余した変態エンジニア達に魔改造され、最初はサーバーの方の処理を作るために作られたのに、それ以外の方でも大量に追加機能が開発されたらしい
参考: [Node.jsとはなにか？なぜみんな使っているのか？](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)

[^5]: npmというのはNode.jsの便利な拡張機能の「バージョンを管理する」やつらしいです！
[^6]: npxというのはNode.jsの便利な拡張機能を「実行」するために必要なやつらしいです！
参考: [npmとnpxの違い説明できますか？](https://qiita.com/kohta9521/items/ee3ed4a2360add80ad79)

[^7]: GitHubは「開発プラットフォーム」です。GitHubで出来ることは多岐に渡りますが、主な用途としては以下の通り
【無料でファイルをアップロード】
GitHubには「リポジトリ」と呼ばれるものを作ることで、自分のPC内のファイルをアップロード(push)することができます。そのファイルを世界中に公開することも可能です。
【バージョン管理】
GitHubにファイルをアップロードするたびに、ファイルの変更点を履歴に保存してくれます。そのため、「やべ～これバグあるじゃん」となった際に、ちゃんと動くバージョンにすぐに戻すことが出来たりします。
【複数人での開発】
GitHubにアップロードしたファイルを公開すれば、他の人もそのファイルを閲覧したり、自分のPCにダウンロードして編集することが可能になります。これを用いて複数人で開発を行うことができるのです。
↓
もっと詳しく知りたい人には以下のサイトがおすすめです
[GitHub(ギットハブ)とは？特徴や使い方を初心者向けにわかりやすく紹介](https://www.sejuku.net/blog/7901)
[サル先生のGit入門](https://backlog.com/ja/git-tutorial/)
[【Git】と【github】の違いとは？](https://qiita.com/True-one/items/d698ebc2346ad184fd3f)

[^8]: a