初心者向け!  Next.jsの環境構築方法

# Next.jsとは
***Reactをベースにしたフロントエンドのフレームワーク***です。
この記事はご自身で学習されるときの環境構築に役に立ててください。


# 環境構築方法
Next.jsの環境構築の方法をこの記事で書いていきます。

# Next.jsのバージョン
この記事で扱うバージョンは```Next.jsの13```です。

### yarnのインストール確認
まずはyarnがインストールされているか確認してください。

```
taro@MacBook-Pro-3 Next % yarn -v   
1.22.19
```
自分の場合はyarnはすでに入ってました。

### yarnのインストール方法
yarnをインストールしていない場合はまずはyarnのインストールからしていきます。
その前に***Node.jsのインストール***からです。

https://nodejs.org/ja

npmをインストールすることになるはずです。バージョンも確認してインストールされたか確認しましょう。
```
# node.jsのバージョンを確認
node -v
# npmのバージョンを確認
npm -v
```

# 新規作成
新規作成の方法です。
```
taro@MacBook-Pro-3 Next % yarn create next-app
yarn create v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

#省略

[4/4] 🔨  Building fresh packages...

success Installed "create-next-app@13.5.4" with binaries:
      - create-next-app
      
    #ここは作るアプリによって変わります。

✔ What is your project named? … next-practice
✔ 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/hashimotonoriaki/myDocker/Next/next-practice.

Using yarn.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- autoprefixer
- postcss
- tailwindcss
- eslint
- eslint-config-next

yarn install v1.22.19
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 24.86s.
Success! Created next-practice at /Users/taro/myDocker/Next/next-practice

✨  Done in 89.43s.
```
上のようになったらNext.jsの新規アプリ作成ができました。

# 起動
実際に起動していきます。
```
taro@MacBook-Pro-3 Next % ls
next-practice
#アプリができています。

taro@MacBook-Pro-3 Next % cd next-practice 
taro@MacBook-Pro-3 next-practice % ls
README.md		node_modules		tailwind.config.ts
app			package.json		tsconfig.json
next-env.d.ts		postcss.config.js	yarn.lock
next.config.js		public

#中身もできています。

taro@MacBook-Pro-3 next-practice % yarn dev
yarn run v1.22.19
$ next dev
(node:69554) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
  ▲ Next.js 13.5.4
  - Local:        http://localhost:3000

 ✓ Ready in 3.7s
```
アプリを起動して
```
http://localhost:3000
```
をブラウザで確認すると以下の画面になります。
![スクリーンショット 2023-10-12 19.25.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/9d0837a2-4e45-05a3-2694-4d9d746cfa70.png)

このかっこいい画面は```appの中にpage.tsx```です。この画面はNext.jsの13の画面です。

```page.tsx
import Image from 'next/image'

export default function Home() {
  return(
    <div>index</div>
  )
}
```
⚫︎補足
***tsxはTypeScript***で書かれています。

# ヘッターとフッター共通化したい
***ヘッターとフッターはどの画面でも表示***されるようにしていきたいです。
global.cssをコメントアウトすると以下のような画面になります。
```global.css
コメントアウト
```
![スクリーンショット 2023-10-12 19.31.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/8f6f7f1b-e7ad-868b-b236-9536cd97bf83.png)

このLayout.tsxで画面に表示していきます。
```layout.tsx
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div>ここにヘッターを入れたい</div>
        <div>{children}</div>
        <div>ここにフッターを入れたい</div>
      </body>
    </html>
  )
}

```

![スクリーンショット 2023-10-12 19.35.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/c4d70ac9-5cfb-ec10-f1c3-6ce82c92f7d9.png)

# ルーティング
***appの中にpetを作成***します。以下のように
```
http://localhost:3000/pet
```
にすると下の画像のようになります。
app/pet/page.tsxにコードを書きます。
```app/pet/page.tsx
export default function Page(){
    return (
        <div>ペットです。</div>
    )
}
```
![スクリーンショット 2023-10-12 19.44.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/203b8ada-06a6-8603-68aa-3fa6c8cc3906.png)

違う例でも見てみます。
app/item/page.tsxを作ります。

```page.tsx
export default function Page(){
    return (
        <div>アイテム。</div>
    )
}
```
![スクリーンショット 2023-10-12 19.49.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/cec5b52c-cb52-43d4-144b-07bef6f3dd95.png)

# componentsの作成
header.tsxとFooter.tsxを作成していきます。
ヘッターとフッター、追記でボディを作っていきます。どのページでも表示されるようにしていきたいです。
基本共通化はヘッターとフッターです。ここでは共通化のより方を書きます。

```layout.tsx
import './globals.css'
import Header from '@/components/header'
import Footer from '@/components/footer'
import Body from '@/components/body'
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
      <body>
        <Header text="ヘッターです" age={2}/>
        <Body text="ボディ"/>
        {children}
        <Footer text="フッターです"/>
      </body>
  )
}
```
このように設定したことでcomponents/Header.tsxとcomponents/Footer.tsxを作成です。
```components/header.tsx
export default function Header({text,age}: { text: string,age:number }) {
    return (
      <header className="text-center py-4  bg-gray-900 flex justify-between px-10">
        <p>{text}</p>
        <p>{age}</p>
      </header>
    )
  }
```

```components/footer.tsx
export default function Footer({text}: { text: string }) {
    return(
        <footer className="text-center py-4  bg-gray-900 flex justify-between px-10">
            <p>{text}</p>
        </footer>
    )
}
```

```components/body.tsx
export default function Body({text}: {text:string}){
    return(
        <body className="text-center py-4  bg-gray-900 flex justify-between px-10">
            <p>{text}</p>
        </body>
    )
}
```
これらを設定して
```
$ yarn dev
```
でサーバーを起動します。
```
http://localhost:3000
```
でサーバーを起動しますと以下のようになります。

![スクリーンショット 2023-10-22 12.39.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/bcc99681-a33f-4577-e45a-df197fc1736e.png)


# 詳しい資料
Next.jsの詳しい詳細はこの記事を参考にしてください。

https://qiita.com/Yuki_Oshima/items/5c0dfd8f7af8fb76af8f

# 参考資料

https://qiita.com/suisui654/items/1b89446e03991c7c2c3d