zackey推し

IT系のこと書くぞい

Next.js x tailwindcss で静的サイトを生成する

技書博のサイトがNext.jsで作成されており、何か自分も開発に携われないかな...と思いつつコードを見てみました。

github.com

が、そもそも自分、Reactもチュートリアルをお遊び程度に触った程度のため、どこから手をつければいいかわからん状態でしたorz

ということで、勉強目的で、Next.jsを用いてポートフォリオPodcastポータルサイトを作りはじめました。

この記事では、Next.js x tailwindcssで静的サイトを出力するまでの手順をメモしておきます。

環境

  • 言語・FW
    • TypeScript
    • Next.js 9
    • tailwindcss
  • デプロイ先
    • Netlify

Next.jsとは? 🤔

ざっくり説明すると、


Next.jsは8から9に変わったことで、TypeScriptの利用方法が大きく変わったとのことです。

詳しくは以下記事をご参照ください。🙏

tailwindcssとは? 🤔

こちらもざっくり説明すると、

  • ユーティリティファースト
    • Bootstrap等のようにUIキット(btn-primaryなど)は提供していない
    • コンポーネントをカスタマイズするためのclassを提供している
  • PostCSSに対応している


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

f:id:kic-yuuki:20191013154205p:plain

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いただけると助かります🙏