【Next.js】第一回 WordPressブログをNext.jsに移行する 〜全体設計、環境構築編〜

.
├── data
│   ├── db
│   ├── posts
│   └── posts-md
│       └── preview
├── public
│   ├── dummy
│   ├── favicon
│   ├── img
│   └── lib
├── src
│   ├── api
│   ├── common
│   ├── components
│   ├── pages
│   ├── parser
│   ├── settings
│   ├── style
│   ├── theme
│   └── types
└── tools

# Next.jsのプロジェクト作成
# * オプションは「use `src/` directory」以外は No を選択
# * AppRouterは使用せず、従来のPageRouterを使用する
$ npx create-next-app@latest --ts
✔ What is your project named? … nextjs-emotion-layout-sample
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes

cd ./nextjs-emotion-layout-sample

# 開発サーバ起動
# localhost:3000
npm run dev

// ESLint, Prettier関連
npm install --save-dev \
prettier \
eslint \
eslint-config-next \
eslint-config-prettier \
eslint-plugin-import \
eslint-plugin-react \
eslint-plugin-react-hooks

// TypeScript用
npm install --save-dev \
typescript-eslint \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser

touch .eslintrc.json
touch .prettierrc.json

{
  // eslint設定を読み込む
  // recommended: 推奨設定
  "extends": [
    "next",
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/recommended",
    "plugin:import/typescript"
  ],
  "rules": {
    // React17からreactインポートが不要になったためoffにする
    "react/react-in-jsx-scope": "off",
    // importをアルファベット順に並べる
    "import/order": [2, { "alphabetize": { "order": "asc" } }]
  }
}

{
    "trailingComma": "all",
    "endOfLine": "lf",
    "semi": false,
    "singleQuote": true,
    "printWidth": 80,
    "tabWidth": 2
  }

{

・・・略・・・

  "version": "0.1.0",
  "private": true,
  "scripts": {

・・・略・・・

    "lint:check": "next lint --dir src",
    "lint:fix": "next lint --fix --dir src",
    "prettier:check": "prettier --check src",
    "prettier:write": "prettier --write src",
    "check": "npm run lint:check && npm run prettier:check",
    "format": "npm run lint:fix && npm run prettier:write"
  },

・・・略・・・

}

# コードのチェックを行う
npm run check

# コードの整形を行う
npm run format

# Emotion のインストール
# CSSPropを使用するため @emotion/styled は使用しない
npm install @emotion/react

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  compiler: (() => {
    let compilerConfig = {
      // Emotion有効化
      emotion: true,
    };
    return compilerConfig;
  })(),
};

module.exports = nextConfig;

{
  "compilerOptions": {

・・・略・・・

    "jsxImportSource": "@emotion/react"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

{
  "extends": [

・・・略・・・

  ],
  "rules": {

・・・略・・・

    // no used, no-named-as-default, no-unresolvedはうざいのでoff
    "@typescript-eslint/no-unused-vars": "off",
    "import/no-named-as-default": "off",
    "import/no-unresolved": "off",
    // Emotionでエラーが出るため
    "react/no-unknown-property": ["error", { "ignore": ["css"] }]
  }
}

import { css } from '@emotion/react'

const styleCard = css`
  background: black;
  font-size: 40px;
  color: white;
  width: 400px;
  height: 80px;
  margin: 80px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
`

const Card = (props: {
  text: string
}) => {
  return <div css={styleCard}>{props.text}</div>
}
export default Card

import { Global, css } from '@emotion/react'
import type { AppProps } from 'next/app'

// グローバルのスタイル
const styleGlobal = css`
  html,
  body,
  textarea {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN',
      'Hiragino Sans', 'BIZ UDPGothic', Meiryo, sans-serif;
  }
`

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Global styles={styleGlobal} />
      <Component {...pageProps} />
    </>
  )
}

// エレキベアテーマ
export const elekibear = {
  colors: {
    primaryYellow: '#fff500',
    primaryDarkGray: '#222222',
    primaryLightGray: '#3d3b39',
    primaryWhite: '#f2f2f2',
    primaryBlue: '#14639C',
  },
};

import '@emotion/react';

declare module '@emotion/react' {
  interface Theme {
    colors: Colors;
  }
}

interface Colors {
  primaryYellow: string;
  primaryDarkGray: string;
  primaryLightGray: string;
  primaryWhite: string;
  primaryBlue: string;
}

import { Global, ThemeProvider, css } from '@emotion/react'
import type { AppProps } from 'next/app'
import { elekibear } from '@/theme/theme'

・・・略・・・

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider theme={elekibear}>
      <Global styles={styleGlobal} />
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

import { Theme, css } from '@emotion/react'

const styleCard = (theme: Theme) => css`
  background: ${theme.colors.primaryDarkGray};
  font-size: 40px;
  color: ${theme.colors.primaryYellow};
  width: 400px;
  height: 80px;
  margin: 80px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
`

const Card = (props: { text: string }) => {
  return <div css={styleCard}>{props.text}</div>
}
export default Card

npx sb@latest init

{

・・・略・・・

  "scripts": {

・・・略・・・

    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },

・・・略・・・

}

import { Meta, StoryFn } from '@storybook/react'
import Card from '.'

export default {
  title: 'Home／PostCard',
} as Meta<typeof Card>

const Template: StoryFn<typeof Card> = (args) => <Card {...args} />
export const SampleCard = Template.bind({})
SampleCard.args = {
  text: 'sample',
}

import React from 'react';
import type { Decorator, Preview } from '@storybook/react';
import { Global, ThemeProvider, css } from '@emotion/react';
import { elekibear } from '../src/theme/theme';

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
}

// グローバルのスタイル
const styleGlobal = css`
  html,
  body,
  textarea {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN',
      'Hiragino Sans', 'BIZ UDPGothic', Meiryo, sans-serif;
  }
`;

export const decorators = [
  (Story) => (
    <ThemeProvider theme={elekibear}>
      <Global styles={styleGlobal} />
      <Story />
    </ThemeProvider>
  ),
];

export default preview

npm install --save-dev @emotion/babel-preset-css-prop

import type { StorybookConfig } from '@storybook/nextjs'

const config: StorybookConfig = {

・・・略・・・

  // Emotionを適用するため追加
  babel: async (options) => {
    options.presets?.push('@emotion/babel-preset- css-prop');
    return options;
  },
}
export default config

import { Global, ThemeProvider, css, Theme } from '@emotion/react'
import type { AppProps } from 'next/app'
import Head from 'next/head'
import { elekibear } from '@/theme/theme'

// グローバルのスタイル
const styleGlobal = (theme: Theme) => css`
  html,
  body,
  textarea {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN',
      'Hiragino Sans', 'BIZ UDPGothic', Meiryo, sans-serif;
  }
  body {
    /** チェック柄 */
    background: linear-gradient(
        45deg,
        #2a2a2a 25%,
        transparent 25%,
        transparent 75%,
        #2a2a2a 75%
      ),
      linear-gradient(
        45deg,
        #2a2a2a 25%,
        transparent 25%,
        transparent 75%,
        #2a2a2a 75%
      );
    background-color: ${theme.colors.primaryDarkGray};
    background-size: 60px 60px;
    background-position:
      0 0,
      30px 30px;
  }
`

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>Next.js × Emotion サンプル</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <ThemeProvider theme={elekibear}>
        <Global styles={styleGlobal} />
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  )
}

import CenterText from '@/components/CenterText'
import Layout from '@/templates/Layout'

/**
 * ホームページ
 * @returns
 */
export default function Home() {
  return (
    <>
      <Layout
        mainContent={<CenterText text="メイン" />}
        sideBarContent={<CenterText text="サイドバー" />}
      />
    </>
  )
}

import { css } from '@emotion/react'

const styleRoot = css`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
`

const styleText = (color?: string) => css`
  font-size: 20px;
  font-weight: bold;
  padding: 12px 0px;
  color: ${color ? color : 'black'};
`

/**
 * 要素中央にテキストを表示する
 * @param props
 * @returns
 */
const CenterText = (props: { text: string; color?: string }) => {
  return (
    <div css={styleRoot}>
      <div css={styleText(props.color)}>{props.text}</div>
    </div>
  )
}
export default CenterText

import { css, Theme } from '@emotion/react'
import Footer from '../Footer'
import Header from '../Header'
import Sidebar from '../Sidebar'
import TitleArea from '../TitleArea'
import { lg, xl } from '@/style/media'

const styleContentWrapper = css`
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0px auto;
  width: 1280px;

  ${xl(css`
    width: auto;
  `)}
  ${lg(css`
    display: block;
  `)}
`

const styleMain = (theme: Theme) => css`
  background-color: ${theme.colors.primaryWhite};
  position: relative;
  margin: 0 0.5%;
  width: 800px;

  ${xl(css`
    width: 65%;
  `)}
  ${lg(css`
    width: auto;
    margin: 0px 10px;
  `)}
`

interface LayoutProps {
  mainContent: React.ReactNode
  sideBarContent: React.ReactNode
}

/**
 * ページ共通レイアウト
 * @param props
 * @returns
 */
const Layout = (props: LayoutProps) => {
  return (
    <>
      <Header />
      <TitleArea />
      <div css={styleContentWrapper}>
        <main css={styleMain}>{props.mainContent}</main>
        <Sidebar sideBarContent={props.sideBarContent}></Sidebar>
      </div>
      <Footer />
    </>
  )
}
export default Layout

import { SerializedStyles, css } from '@emotion/react'

/** レスポンシブブレークポイント */

export const xl = (childen: SerializedStyles) => {
  return css`
    @media (max-width: 1280px) {
      ${css(childen)}
    }
  `
}

export const lg = (childen: SerializedStyles) => {
  return css`
    @media (max-width: 1024px) {
      ${css(childen)}
    }
  `
}

export const md = (childen: SerializedStyles) => {
  return css`
    @media (max-width: 768px) {
      ${css(childen)}
    }
  `
}

export const sm = (childen: SerializedStyles) => {
  return css`
    @media (max-width: 640px) {
      ${css(childen)}
    }
  `
}

export const xlWidth = 1280
export const lgWidth = 1024
export const mdWidth = 768
export const smWidth = 640

import { Theme, css } from '@emotion/react'
import CenterText from '@/components/CenterText'

const styleRoot = (theme: Theme) => css`
  width: 100%;
  background-color: ${theme.colors.primaryDarkGray};
`

const styleContent = css`
  height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
`

/**
 * ヘッダー
 * @returns
 */
const Header = () => {
  return (
    <>
      <header>
        <div css={styleRoot}>
          <div css={styleContent}>
            <CenterText text="ヘッダー" color="white" />
          </div>
        </div>
      </header>
    </>
  )
}
export default Header

import { Theme, css } from '@emotion/react'
import CenterText from '@/components/CenterText'

const styleRoot = (theme: Theme) => css`
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: ${theme.colors.primaryDarkGray};
  margin-top: 20px;
`

/**
 * フッター
 * @returns
 */
const Footer = () => {
  return (
    <footer css={styleRoot}>
      <CenterText text="フッター" color="white" />
    </footer>
  )
}
export default Footer

import { Theme, css } from '@emotion/react'
import CenterText from '@/components/CenterText'

const styleTitleArea = (theme: Theme) => css`
  height: 280px;
  background-color: ${theme.colors.primaryYellow};
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
`

const TitleArea = () => {
  return (
    <div css={styleTitleArea}>
      <CenterText text="タイトル" />
    </div>
  )
}
export default TitleArea

import { Theme, css } from '@emotion/react'
import { lg, xl } from '@/style/media'

const styleRoot = (theme: Theme) => css`
  background-color: ${theme.colors.primaryWhite};
  padding: 0px;
  margin: 0px auto;
  width: 400px;

  ${xl(css`
    width: 30%;
  `)}
  ${lg(css`
    display: block;
    width: auto;
    margin: 10px;
  `)};
`

/**
 * サイドバー
 * @param props
 * @returns
 */
const Sidebar = (props: { sideBarContent: React.ReactNode }) => {
  return <div css={styleRoot}>{props.sideBarContent}</div>
}
export default Sidebar

# NetlifyCLIのインストール
npm install -g netlify-cli
netlify -v

# ログイン
netlify login

# プロジェクトとの紐付け
# Site Name or Site ID で紐づける
netlify link

# デプロイ方法
# フォルダ名(-d)は uploads を指定
# そのフォルダ内の構成と完全に同期される
netlify deploy --prod -d uploads