技書博のサイトがNext.jsで作成されており、何か自分も開発に携われないかな...と思いつつコードを見てみました。
が、そもそも自分、Reactもチュートリアルをお遊び程度に触った程度のため、どこから手をつければいいかわからん状態でしたorz
ということで、勉強目的で、Next.jsを用いてポートフォリオ・Podcastのポータルサイトを作りはじめました。
この記事では、Next.js x tailwindcssで静的サイトを出力するまでの手順をメモしておきます。
環境
- 言語・FW
- TypeScript
- Next.js 9
- tailwindcss
- デプロイ先
- Netlify
Next.jsとは？ 🤔
ざっくり説明すると、
Next.jsは8から9に変わったことで、TypeScriptの利用方法が大きく変わったとのことです。
詳しくは以下記事をご参照ください。🙏
tailwindcssとは？ 🤔
こちらもざっくり説明すると、
UIキットに依存しないコンポーネントを作成したいと思い、採用することにしました。
手順
ではつらつらと✏️
1.Next.js x TypeScriptの環境を構築
Next.jsの以下を参考に進めていきます。
以下で必要なパッケージを追加していきます。
mkdir next-sample cd next-sample yarn add -D @types/node @types/react @types/react-dom typescript yarn add next react react-dom
package.jsonにnpmスクリプトを追記していきます。
{ "scripts": { "dev": "next", "build": "next build", "start": "next start", "export": "yarn build && next export" }, }
以下ページを作成し、起動することを確認します。
import React from 'react' import { NextPage } from 'next' const Page: NextPage = props => { return ( <div> Next.jsだよ </div> ) } export default Page
yarn dev
2.tailwindの導入
以下を参考に進めていきます。
tailwindcssと必要なパッケージを追加、設定を行います。
yarn add tailwindcss autoprefixer yarn run tailwind init
module.exports = { plugins: [require('tailwindcss'), require('autoprefixer')] }
@tailwind base;
@tailwind components;
@tailwind utilities;
以下のようにページを編集＆yarn devし、画像のような表示となればOKです。
import React from 'react'
import { NextPage } from 'next'
+ import '../styles/main.css'
const Page: NextPage = props => {
return (
- <div>
- Next.jsだよ
- </div>
+ <div className="bg-gray-200 p-4">
+ <span className="block text-gray-700 text-center bg-gray-400 px-4 py-2">1</span>
+ <span className="block text-gray-700 text-center bg-gray-400 px-4 py-2 mt-2">2</span>
+ <span className="block text-gray-700 text-center bg-gray-400 px-4 py-2 mt-2">3</span>
+ </div>
)
}
export default Page
3.静的サイトとして出力する
以下を参考に進めます。
next.config.jsにルーティングを記述します。
module.exports = { exportPathMap: async () => { return { '/': { page: '/' } } } }
以下でビルド＆HTMLを出力します。
# yarn run next build && yarn run next export yarn export
すると、Next.js - Docsに記述されている通り、
outDir - Absolute path to the out/ directory
/outディレクトリ配下に出力されていることを確認できれば、設定OKです。
もし起動確認されたい場合は、
yarn global add serve # HTMLを出力したoutディレクトリに移動 cd next-sample/out serve
ターミナルに表示されたURL(デフォルトだとhttp://localhost:5000/)をクリック、確認することが可能です。
おわり
以上になります。
気になる点等ありましたら、FBいただけると助かります🙏
