🚴
next.jsを「はじめ」から始める
インストール
1. node.js
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install node
シェルを再起動して
node -v
npm -v
バージョンが表示されればOK
2. next.js, react
npm install next@latest react@latest react-dom@latest
プロジェクトセットアップ
1. node.js
npm init -y
2. typescript
npm install typescript --save-dev
3. package.jsonのカスタマイズ
package.json
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
...
}
これを書きます。
package.json
{
"name": "proj_name",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
こんな感じになります。
そして、あとは、プログラムを作ります。
4. appフォルダ作成
ルート/appを作ります。
5. layout.tsx作成
サンプル：
root/app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
6. page.tsx作成
root/app/page.tsx
export default function Page() {
return <h1>Hello, Next.js!</h1>
}
完成！
開発サーバー起動
npm run dev
編集すると自動でリロードしてくれます。
Discussion