Zenn
😸

Next.js(with TypeScript, tailwind)のセットアップ

2021/06/28に公開
Next.js
React
TypeScript
Web
Tailwind CSS
tech

バージョン一覧

2021/06/28時点で安定バージョン
node 14.17.1 (12 or later)
React.js 17.0.2
Next.js 11.0.1
tailwind 2.2.4
TypeScript 4.3.4

手順1 Nextアプリを構築

カレントディレクトリにアプリを作る

npx create-next-app . --use-npm

手順2 TypeScriptをインストール

空のtsconfig.jsonファイルを生成

touch tsconfig.json

typescriptをインストール

npm install --save-dev typescript @types/react @types/node

ページを構成するファイルをjsx から tsx に変更する。
APIは ts にする。

  • ./pages/_app.js -> ./pages/_app.tsx
  • ./pages/index.js -> ./pages/index.tsx
  • ./pages/api/hello.js -> ./pages/api/hello.ts
mv ./pages/_app.js ./pages/_app.tsx

mv ./pages/index.js ./pages/index.tsx

mv ./pages/api/hello.js ./pages/api/hello.ts

_app.tsxの中身をbuil-in type 'AppProps'を使って以下のようにする。

import '../styles/globals.css'
import { AppProps } from 'next/app'

function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default App

手順３　Tailwind CSSを導入

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

config fileを生成する

npx tailwindcss init -p

tailwind config fileを次のように変更する

tailwind.config.js
module.exports = {
  mode: 'jit'
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

global.cssに記述を加える

global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

手順4 Layout Component

全てのページで共通のコンポーネントを持つLayout Componentを作成する。
components/layout.tsxを作成し、以下の内容を記述する。

components/layout.tsx
export default function Layout({ children }) {
  return <div>{children}</div>
}

こうすることにより、layout.tsxをindex.tsxや他のtsxファイルに適用することで共通コンポーネントとして利用できる。

pages/index.tsx
import Link from 'next/link'
import Layout from '../components/Layout'

const IndexPage = () => (
  <Layout title="Home | Next.js + TypeScript Example">
    <h1>Hello Next.js 👋</h1>
    <p>
      <Link href="/about">
        <a>About</a>
      </Link>
    </p>
  </Layout>
)

export default IndexPage

layout.tsxを次のようにupdateする。

components/layout.tsx
import React, { ReactNode } from 'react'
import Link from 'next/link'
import Head from 'next/head'

type Props = {
  children?: ReactNode
  title?: string
}

const Layout = ({ children, title = 'This is the default title' }: Props) => (
  <div>
    <Head>
      <title>{title}</title>
      <meta charSet="utf-8" />
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    </Head>
    <header>
      <nav>
        <Link href="/">
          <a>Home</a>
        </Link>{' '}
        |{' '}
        <Link href="/about">
          <a>About</a>
        </Link>{' '}
        |{' '}
        <Link href="/users">
          <a>Users List</a>
        </Link>{' '}
        | <a href="/api/users">Users API</a>
      </nav>
    </header>
    {children}
    <footer>
      <hr />
      <span>I'm here to stay (Footer)</span>
    </footer>
  </div>
)

export default Layout

ファイルを追加する。

pages/about.tsx
import Link from 'next/link'
import Layout from '../components/Layout'

const AboutPage = () => (
  <Layout title="About | Next.js + TypeScript Example">
    <h1>About</h1>
    <p>This is the about page</p>
    <p>
      <Link href="/">
        <a>Go home</a>
      </Link>
    </p>
  </Layout>
)

export default AboutPage

おまけ　アトミックデザインの採用

お好みでディレクトリ構成をアトミック構成にする。
参考記事:
https://qiita.com/kentt/items/c86782b481ec175a57e2

srcディレクトリ以下にapi,index.js,pagesなどを配置した場合は以下に書き換える。

tailwind.css.js
  purge: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],

Discussion