見出し画像

【Next.jsに触れてみよう。】 #2 とりあえず立ち上げてみる

こんにちは!
ALH開発エンジニアのY.Nです。

#1では「Next.jsとは何か?」について触れました

続く今回は、実際にプロジェクトを作成してNext.jsを触ってみましょう。

早速プロジェクト作成

環境
・npm 8.5.0
・typescript 4.7.4
・react 18.2.0
・next.js 12.2.1

next.jsのプロジェクトは公式サイトのコマンドをnpmかyarnに打ち込めばすぐに作成することができる。
(例)npmの場合
プロジェクトを作成するディレクトリ内で

$ npx create-next-app@latest --ts

と、プロジェクト名を聞かれるので好きな名前を入力

? What is your project named? » my-app
Creating a new Next.js app in C:\my-app.

Using npm.

Installing dependencies:
- react
- react-dom
- next


added 17 packages, and audited 18 packages in 13s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

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


added 215 packages, and audited 233 packages in 29s

68 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Initialized a git repository.

Success! Created my-app at C:\my-app

SuccessとでればOK!
プロジェクト作成することができたので立ち上げます。
作成したpjのディレクトリに移動して...

cd my-app
npm run dev
$ npm run dev

> my-app@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
event - compiled client and server successfully in 850 ms (169 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 255 ms (170 modules)
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
wait  - compiling / (client and server)...
event - compiled client and server successfully in 175 ms (199 modules)

fastreloadが不完全と言われていますが、とりあえず立ち上がったようなのでlocalhostで確認しましょう。

こんな感じの画面が表示されると思います。これでプロジェクト作成から立ち上げまで完了です。ホントにcreate-appコマンドは便利です。

中身を見ていく

次にプロジェクトの中身見ていきます。

.nextnode_modulespages
│ ┝ api
│ ┝ _app.js
│ └ index.jspublicstyles.gitignorepackage-lock.jsonpackage.jsonREADME.md

おおよそディレクトリ構成はこんな感じだと思います。
※HTMLファイルがないことに最初困惑したのですが、最近はこれが主流なんですかね?

Next.jsではpages配下に作成したファイルをページとしてルーティングすることでwebページを構築します。
では具体的にどのようなURLになるかというと
next.jsの特徴の一つでもある。「File-based Routing」によって決定されます。

File-based Routing

ファイルの配置によってURLを命名するNext.jsの機能。pages配下に配置されたファイルが対象となる。

例えばpages/news.jsにファイルを配置すると、ブラウザで/newsにアクセスするとページが表示されます。
pages/news/index.jsであれば/news/、pages/news/test.jsであれば/news/testでページが表示されます。

Next.jsの基礎知識より引用

では実際にページを作成し、配置してみましょう。
pages配下に2022-07-09フォルダを作り、その配下にhello.tsxを作成します。

pages/2022-07-09/hello.tsx

import { NextPage } from "next"
import Head from "next/head"

const Hello: NextPage = () => {
  return (
    <div>
        <Head>
          <title>My page title</title>
        </Head>
        <h1>Hello!!!</h1>
    </div>
  )
}

export default Hello

適当なページを作成できたのでアクセスしてみましょう。

http://localhost:3000/2022-07-09/hello

Hello!!!と表示されたかと思います。
react単体ならapp.jsなどにルーティングを記述しますが、Next.jsを導入すれば手間を減らすことができ、かつ直観的です。

次回

次は「動的ルーティング」についてです。next.jsはファイルの配置によってルートパスが決定されてしまいますが、ちゃんと動的ルーティングにも対応しています。





↓ ↓ ↓ 採用サイトはこちら ↓ ↓ ↓


 ↓ ↓ ↓ ALHについてはこちら ↓ ↓ ↓


↓ ↓ ↓ もっとALHについて知りたい? ↓ ↓ ↓




みんなにも読んでほしいですか?

オススメした記事はフォロワーのタイムラインに表示されます!