はじめに
これは 株式会社 RetailAI X Advent Calendar 2022 の 4 日目の記事です。
昨日は @daisuke-yamamoto さんの記事でした。 Terraform、後から来る辛みと処方箋🌶
本日は『Next.js初心者入門記事』です。
UIパーツを構築するためのJavaScriptライブラリReactとやりやすく開発できるためのReactのフレームワークNext.jsの利用会社は増加しています。
では、React勉強した後、早くNext.jsを利用してプロジェクト始まりたいために、事前理解しないといけないことを整理させていただきました。
Reactから、Next.jsへ
もちろん、npx create-next-appor yarn create next-appで簡単にNext.jsのプロジェクト作れますが、ここでReactのみ使っているプロジェクトとの違いを示すために、ReactアプリからNext.jsへの遷移方法を説明します。
ここで、Reactで作ってたサンプルコード（index.html）一例用意しました。
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const app = document.getElementById("app")
function Header({ title }) {
return <h1>{title ? title : "Default title"}</h1>
}
function HomePage() {
const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"]
const [likes, setLikes] = React.useState(0)
function handleClick() {
setLikes(likes + 1)
}
return (
<div>
<Header title="Develop. Preview. Ship. 🚀" />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
<button onClick={handleClick}>Like ({likes})</button>
</div>
)
}
ReactDOM.render(<HomePage />, app)
</script>
</body>
</html>
Next.jsのパッケージはnpmで管理されていますので、unpkg.comからの依存関連は必要ないです。
まずは新しいpackage.jsonファイルを作ります。(何も入っていないオブジェクト含め)
// package.json
{
}
ターミナルでnpm install react react-dom nextを実行します。
そしたら、package.jsonファイルが次のようになります。同時に実際に依存ファイル含めるのフィルターnode_modulesも作られています。
// package.json
{
"dependencies": {
"next": "^12.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
次はいらないコードの削除します。
-
reactとreact-dom関連のscript(npmがインストールしてくれたから) -
<html>と<body>（Next.jsが作ってくれるから） -
babelのscript(Next.jsのコンパイラーがJXSファイルをブラウザが理解できるjavascripへの通訳してくれるから) -
appとReactDOM.render -
<script type="text/jsx">タグ -
React.useState(0)の中のReact.
上にコード追加します。
import { useState } from "react"
変換されたコードは次のようになります。
// index.html
import { useState } from 'react';
function Header({ title }) {
return <h1>{title ? title : 'Default title'}</h1>;
}
function HomePage() {
const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
const [likes, setLikes] = useState(0);
function handleClick() {
setLikes(likes + 1);
}
return (
<div>
<Header title="Develop. Preview. Ship. 🚀" />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
<button onClick={handleClick}>Like ({likes})</button>
</div>
);
}
完全にNext.jsへ遷移できるあめ、まだ次の作業が必要です。
- ファイルタイプを
.htmlから.jsor.jxsへ変更 - Reactコンポーネントにexport追加
// ...
export default function HomePage() {
// ...
- Next.jsのdevelopmentサーバが起動できるために、
package.jsonファイルにscripts追加
// package.json
{
"scripts": {
"dev": "next dev"
},
// "dependencies": {
// "next": "^11.1.0",
// "react": "^17.0.2",
// "react-dom": "^17.0.2"
// }
}
これでターミナルでnpm run devを起動する時、localhost:3000でアプリの確認ができます。
サンプルコードの最終型か次のような感じです。
//index.jxs
import { useState } from 'react';
function Header({ title }) {
return <h1>{title ? title : 'Default title'}</h1>;
}
export default function HomePage() {
const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
const [likes, setLikes] = useState(0);
function handleClick() {
setLikes(likes + 1);
}
return (
<div>
<Header title="Develop. Preview. Ship. 🚀" />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
<button onClick={handleClick}>Like ({likes})</button>
</div>
);
}
前のサンプルコードと比べると大分短くなっているので、Reactの目的『UIパーツを構築するため』が明確に見えるようになっています。
終わりに
いろんなフレームワークのおかげで、開発が楽になるのはありがたいことです。
開発者としては、その楽の原因、フレームワークが何していただいたことを理解するのは、問題調査にも役たつと思います。
Next.jsの勉強を通して、Reactの性格も分かるようになっている気がします。
「お前がUIパーツのデザインをよく考え！他は俺に任せて！」とReactが言ってくれたみたいです。www
明日 5 日目の記事は @tomoyuki-suzuki さんの 『Astro を使ってブログをRSSフィードで公開してみる。』 です。
お楽しみにしていただければ幸いです。
参考
この記事は以下の情報を参考にして執筆しました。
https://nextjs.org/learn/foundations/from-react-to-nextjs