はじめに

お待たせしました！2年生は今日からついに新しいフレームワークを使って実際に開発を行っていただきます。その名も"Next.js"です！

本編

Next.jsとは

Next.jsとは、TypeScriptを使って書くReactというライブラリのライブラリです。(厳密には、Reactの概念を使ってフロントライブラリであるReactをフルスタックに拡張したもの。)ライブラリのライブラリ！！？と驚いた人もいるでしょうがあまり気にしなくても大丈夫です！ただ、Reactのコンポーネントという概念を使うのでそこだけ覚えていてください！

以下リファレンスなど

困ったことがあったらまずは、リファレンスをみよう！！(AIに聞くのも良いですが、まずは説明書を読んでやてみてください！)

https://ja.react.dev/

https://nextjsjp.org/

https://nextjs.org/docs

前準備

前回同様、実際に作業を始める前に色々な前準備をします！(2年生にはGitHubに慣れて欲しいのでその準備がメインです！)

Step1 Next.jsをインストール！！

まずは、フレームワークをインストールしていきましょう！

好きなディレクトリに移動して、VScodeを開いてください。そして、VScodeのコマンドプロンプト(ターミナル)を開いておいてください！

cmd(ターミナル)で以下のコマンドを打つ！

pnpm create next-app@latest <プロジェクトの名前> --yes

:::note warn medrk-portfolioの部分は自分の名前-portfolioとしておいてください。(自分の名前は下の名前でも上の名前でもおk) :::

pnpm create next-app@latest medrk-portfolio --yes

インストールが走る

以下のコマンドを打ってサーバーを起動 (python manage.py runserverと同じ操作)

cd medrk-portfolio 
pnpm dev

そしたら、http://localhost:3000 に入る！

これにてNextインストール完了！！ ターミナルを使うので、ctl + Cでサーバーを閉じておいてください！

Step2 リモートリポジトリ(GitHub)とローカルリポジトリを作ろう

手順1 いつも通り、GitHubの自分のページにアクセス！！

手順2 Newをクリックして新しいリモートリポジトリを作成！

手順3 Repositoryの名前を入力する！ここでのリポジトリ名は、自分の名前-portfolioとしてください。(私はmedrk-portfolio)となっています。 Choose visibilityはPublicでお願いします

手順4 いつもの画面

いかがHTTPSとなってることを確認して

:::note warn ここでは、以下のものを一行一行コマンドプロンプトに貼り付けてください :::

GitHubをリロードして、以下のような画面になればおk！

Step3 Copilotに審査(レビュー)してもらう準備！！など

よくわからないと思いますが、ざっくりいうと、GitHub上でコードを少し審査(レビュー)してくれるbotの設定をします。特に気にせずコピペなど指示通りにお願いします！

以下のように Githubフォルダにcopilot-instructions.mdとpull_request_template.mdを作成してください！！ 名前が重要ですのでコピペでファイルを作成してください！！

そしたら、それぞれの中身を以下のようにお願いします！ copilot-instructions.md

# .github/copilot-instructions.md
 
## Stack
 
- Next.js App Router
- TypeScript
- Tailwind CSS
- pnpm
 
## Review Style
 
When reviewing pull requests:
 
- keep reviews beginner-friendly
- prioritize readability and basic correctness
- avoid overly strict reviews
- avoid suggesting complex architecture
- explain problems simply and clearly
- suggest fixes with examples when possible
 
## Check for
 
- unnecessary use client
- usage of any
- missing loading or error handling
- duplicated code
- very large components
- hardcoded URLs or secrets
- broken TypeScript types
- unused imports or variables
 
## Next.js
 
- prefer Server Components by default
- use Client Components only when needed
- avoid unnecessary useEffect
 
## Approval
 
If there are no major problems:
 
- respond with LGTM
- minor style issues do not need blocking comments
- prefer educational suggestions over strict rejection
- prefer encouragement over criticism
- do not block PRs for small style issues

pull_request_template.md

# Pull Request
 
## 概要
 
- 何を変更したか
 
## 背景
 
- なぜ必要だったか
 
## 変更内容
 
- [ ] UI
- [ ] API
- [ ] State管理
- [ ] DB
- [ ] Infra
- [ ] その他
 
## 動作確認
 
- [ ] pnpm lint
- [ ] pnpm build
- [ ] ローカル確認
- [ ] エラー確認
 
## Review Checklist
 
- [ ] 不要な use client がない
- [ ] 型安全を保っている
- [ ] エラーハンドリングをしている
- [ ] env を直書きしていない
- [ ] 大きすぎるコンポーネントになっていない
 
## スクリーンショット（必要なら）
 
## Reviewerに見てほしい点
 
-

そしたら、commit&push!!

Step4 ブランチを切ろう！！

これから新しい機能を作るのでブランチを分けます (新しい機能を作る時にブランチを切るのが基本です！)

左下のブランチ名がmainになってることを確認して、クリック

上のボックスにfeature/add-header-and-fotterと書いてEnter

ブランチが変わってることを確認

Branchの発行をクリック

ブランチの名前は、変更する機能の名前を書きます！気になる人は以下！ https://qiita.com/izutani/items/5397dac2b2c1e2079261

前準備終わり！！！

Nextをゴリゴリいじっていこう！！！

まずは、開発サーバーをもう一度、立てましょう！！

pnpm dev

1,表示を変えよう！

皆さんが主にいじるのはapp/というディレクトリです。実際に一番最初のページの画面を変えてみましょう。

app/page.tsxというファイルを開いてくださいすでに色々書かれていますが、ここを少しだけ変えていきます。

16行目あたりにある以下のコードを見つけてみてください

<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
            To get started, edit the page.tsx file.
</h1>

それを以下のように書き換えてみましょう

<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
            Hello,World I am Riki Maeda
</h1>

このように変えることができます！

気づいた人もいるかも知れませんが、.tsxファイル(TypeScriptで書かれたReact・Next)というのは、関数の中にhtmlを直接書き込んでそれを描画します！HTMLを直接書き込まないので、ですがこれだとまだまだただのHTMLファイルと変わりなさそうですね。今後この関数の返却値にHTMLがあるのが非常に役に立つこと日が来ます！

2,ルーティング

そして、便利なことにNext.jsは、Djangoとは違い、ディレクトリパスとルーティングが一致しています。何を言ってるのかよくわからないと思うので実際にやっていきましょう！！以下のように app/aboutフォルダを作ってその中に、page.tsxファイルを作ってみましょう！

そして、page.tsxに以下を書き込んでみてください

export default function About() {
  return (
    <div>
        これはaboutページです
    </div>
  );
}

そしたら、http://localhost:3000/about に行ってみましょう

以上のようになっていると思います！このように、ディレクトリパスはapp/aboutになっていると思いますこの場合だと、localhost:3000/aboutとなります！

ということで、 localhost:3000/project localhost:3000/links localhost:3000/play も作って行ってくだささい！中身はさっきのpage.tsxと同じにして、aboutの文言だけ

:::note info page.tsxの以下の部分は、それぞれフォルダ名と合わせてください！ :::

export default function About()#<-ここの名前！ {
  return (
    <div>
        これはaboutページです
    </div>
  );
}

Next.jsでポートフォリオ作成！！~ルーティングとページ表示~miki