はじめに
自サイトの構成が古く（生PHPによるお手製CMS！）なってきたので、新しい技術で置き換えようと思いました。
いろいろ調べてみると、Next.jsかGatsbyというフレームワークが良さそうだったので、まずはメジャーなNext.jsのほうを試してみることにしました。
Gatsbyを試してみた記事はこちらです。
https://qiita.com/naga3/items/2063e4eeecbf4e785d4d
Vercelとは
Next.jsを開発しているVercel社のホスティングサービスで、楽に使えそうなのでやってみます。
Vercelは無料プランと有料プランがありますが、個人が普通に使うぶんには無料プランで十分そうです。
https://vercel.com/pricing
プランによる制限についではこちらが詳しいです。
https://b.lollipop.onl/q2fgpwij4/
Vercelプロジェクト作成
アカウントがなければサインアップしておきましょう。
https://www.gatsbyjs.com/dashboard/signup/
まず、ダッシュボード https://vercel.com/dashboard から Import Project を押します。
既存のリポジトリを使うImport Git Repositoryと、テンプレートから作成するImport Templateがありますが、今回はゼロから作るのでImport Templateを選びます。
テンプレートはNext.jsを選びます。
次にリポジトリ名、プロジェクト名を適当に付けます。プロジェクト名は小文字のみの英数字+ハイフンしか使えないようです。
最後にDeployボタンを押すと、yarn installやらいろいろ走るのが見えて、デプロイ完了しました。やったね！
早速Visitボタンを押して完成したサイトに訪れてみましょう。
ローカルでの開発
ここからはローカルでの開発になります。nodeやyarnはインストールしておきます。
上で作成したリポジトリをcloneして、
yarn install
yarn dev
を実行するとサーバーが立ち上がって、http://localhost:3000/で確認することができます。
次に、トップページに書いてあるとおり、pages/index.jsを編集してみます。
Reactはよく分かりませんが、JavaScriptとHTMLが混在した形式のようですね。とりあえずh1を変更してみます。
Welcome to <a href="https://nextjs.org">Next.js!</a>
これを以下のように変更します。
こんにちは <a href="https://nextjs.org">Next.js!</a>
保存するとLive Reloadされました。
いいですね。
ローカルからのデプロイ
そのままmasterにpushすれば本番に反映されるのではないかと思ったので、やってみると、無事反映されました。簡単ですね。
ページの追加
ページを増やしてみます。pagesディレクトリ下にファイルを作成し、ページ表示用の関数をexport defaultするだけでページを追加できるようです。
export default function Page2() {
return <h1>page 2</h1>
}
http://localhost:3000/page2を開きます。
できました。
トップページからリンクを張る
普通にaタグで張ってみます。
<a href="/page2">Page 2</a>
普通に動きました。
クライアントサイドでルーティングを行うLinkコンポーネントというものがあるらしいので、そちらも使ってみます。
import Link from 'next/link'
...
<Link href="/page2">Page 2</Link>
こちらも普通に動きましたが、aよりもLinkのほうが圧倒的に速いです。通常はこちらを使ったほうが良さそうですね。
Linkコンポーネントの詳細はこちら https://nextjs.org/docs/api-reference/next/link
アセットを追加する
画像などのアセットは、/public配下に置きます。これでルートから参照できます。
適当な画像をimage.pngという名前で/public配下に置き、page2.jsを変更してみます。
export default function Page2() {
return (
<div>
<h1>ビャンビャン麺</h1>
<img src="/image.png" />
</div>
)
}
良さそうですね。
CSSを適用する
ページ内に書く
いわゆるstyleタグのようにCSSファイルを分けない場合は、最初から組み込まれているstyled-jsxを使います。
export default function Page3() {
return (
<div>
<p>赤色</p>
<style jsx>{`
p {
color: red;
}
`}</style>
</div>
)
}
CSSファイルを分ける
CSSファイルを独立させるのなら、stylesディレクトリにCSSファイルを置いてimportすればOKです。
CSSの構文はそのまま書けますが、ファイル名を*.module.cssにする必要があります。
.title {
color: blue;
}
import styles from '../styles/page4.module.css'
export default function Page4() {
return (
<div>
<p className={styles.title}>青色</p>
</div>
)
}
