More than 1 year has passed since last update.

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

Posted at 2023-10-22

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のインストールからです。

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

をブラウザで確認すると以下の画面になります。

このかっこいい画面は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

コメントアウト

この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>
  )
}

ルーティング

appの中にpetを作成します。以下のように

http://localhost:3000/pet

にすると下の画像のようになります。
app/pet/page.tsxにコードを書きます。

app/pet/page.tsx

export default function Page(){
    return (
        <div>ペットです。</div>
    )
}

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

page.tsx

export default function Page(){
    return (
        <div>アイテム。</div>
    )
}

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

でサーバーを起動しますと以下のようになります。

詳しい資料

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

参考資料

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up