【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-appCreating 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-appSuccessとでればOK！
プロジェクト作成することができたので立ち上げます。
作成したpjのディレクトリに移動して...
cd my-appnpm 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コマンドは便利です。
中身を見ていく
次にプロジェクトの中身見ていきます。
┝ .next
┝ node_modules
┝ pages
│ ┝ api
│ ┝ _app.js
│ └ index.js
┝ public
┝ styles
┝ .gitignore
┝ package-lock.json
┝ package.json
└ README.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でページが表示されます。
では実際にページを作成し、配置してみましょう。
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について知りたい？ ↓ ↓ ↓