皆さんこんにちは！
最近ジメジメしてあまり気分が乗りません。
梅雨は人生で3番目くらいに嫌いです。
そんなことで最近学習し始めたNext.jsとTypeScriptですが、これからかなり流行るのではないかと感じました。
Next.jsなしではReactの環境構築を行いたくありませんし、TypeScriptが無ければコードが書けない体になっていしました。
また、最近インターンの募集で必須スキルにReactやTypeScriptなどが記載しているのを多く見かけます。
前置きはさておき、今回はNext.jsで環境構築を行う手順をご紹介します。
それぞれの用途(TypeScript、Material-ui、Tailwindcss)に分けて書いていくので、ご自分の好きな環境構築をお選びください。
注意事項
環境構築において特に説明は致しません。
コマンドやソースコードを書くだけなので、なにか気になる点があればご自分でお調べください。
それでは早速説明していきます！
TypeScript付きのNext.jsプロジェクトの作成
# npxの場合
npx create-next-app next-app --example with-typescript
# yarnの場合
yarn create next-app next-app --example with-typescript
material-uiやtailwindcssを使用しないという方はここで終了です。
material-uiの導入
npm i @material-ui/core @material-ui/icons @material-ui/styles @material-ui/lab
yarn add @material-ui/core @material-ui/icons @material-ui/styles @material-ui/styles
インストールし終えたら、以下の表をもとにファイルの作成を行って下さい。
| ディレクトリ | ファイル名 |
|---|---|
| components | Theme.ts |
| pages | _app.tsx |
| pages | _document.tsx |
作成したそれぞれのファイルに以下をコピペ。
import { createTheme } from '@material-ui/core';
const Theme = createTheme();
export default Theme;
import React, { useEffect } from 'react';
import { AppProps } from 'next/app';
import { ThemeProvider } from '@material-ui/core/styles';
import { StylesProvider } from '@material-ui/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Theme from '../components/Theme';
const CustomApp = ({ Component, pageProps }: AppProps): JSX.Element => {
useEffect(() => {
const jssStyles: Element | null = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement?.removeChild(jssStyles);
}
}, []);
return (
<StylesProvider injectFirst>
<ThemeProvider theme={Theme}>
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</StylesProvider>
);
};
export default CustomApp;
import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/core/styles';
class MyDocument extends Document {
render(): JSX.Element {
return (
<Html lang='ja'>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
MyDocument.getInitialProps = async (ctx: DocumentContext) => {
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () => originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />)
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheets.getStyleElement()}
</>
),
};
};
これでmaterial-uiを使用することができます。
Tailwindcssを使用しない方はこれで終了となります。
Tailwindcssの導入
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
※ エラーが出てインストールできない場合は、1つずつインストールしてください
Tailwindの設定ファイルを作成
npx tailwindcss init -p
すると、tailwind.config.jsとpostcss.config.jsが自動で作成されます。
tailwind.config.jsでpurgeを以下に変更。
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
purgeというのはpurgecssというものを使って、使わないCSSをビルド時に自動的に消去してくれます。特に、Tailwindcssのファイルは重いので、これを設定しないとビルド時にCSSファイルだけでもMBを超える要領になってしまいます。
なので、必ず設定しましょう！
そしたら以下の表をもとにファイルを作成。
| ディレクトリ | ファイル名 |
|---|---|
| styles | global.css |
global.cssに以下をコピペ
/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
h1 {
font-size: 48px;
line-height: 1;
}
h2 {
font-size: 36px;
line-height: 1.333;
}
h3 {
font-size: 24px;
line-height: 1;
}
h4, h5, h6 {
font-size: 16px;
line-height: 1.5;
}
Tailwindを導入すると、h1タグなどのフォントがリセットされてしまうためh1などのCSSも追加してください。
先ほど作成したpages/_app.tsxに作成したCSSファイルを読み込んでください。
import "../styles/global.css";
これでTailwindを使用することができます。
番外編
Tailwindcssの設定方法がいまいち分からないという方は、以下のコードをもとに作成した見てください。
const colors = require("tailwindcss/colors.js");
module.exports = {
mode: "jit",
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
preserveHtmlElements: false,
important: true,
options: {
defaultExtractor: (content) => {
const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, "")
return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
},
whitelist: [
/-(leave|enter|appear)(|-(to|from|active))$/,
/^(?!cursor-move).+-move$/,
/^router-link(|-exact)-active$/
]
},
theme: {
screens: {
sm: { max: "560px" },
md: { max: "769px" },
tb: { max: "960px" }
},
colors: {
black: colors.black,
current: "currentColor",
gray: colors.gray,
green: colors.green,
google: "#c6594b",
indigo: colors.indigo,
main: "#1976d2",
pink: colors.pink,
transparent: "transparent",
red: colors.rose,
white: colors.white,
yellow: colors.yellow,
link: "#0366d6"
},
extend: {}
},
variants: {
textColor: ["responsive", "hover", "focus", "group-hover"],
backgroundColor: ["responsive", "hover", "focus", "group-hover"],
extend: {}
},
plugins: [
function ({ addUtilities }) {
const newUtilities = {
".flex-100": {
flex: "0 0 100%"
},
".flex-90": {
flex: "0 0 90%"
},
".flex-80": {
flex: "0 0 80%"
},
".flex-70": {
flex: "0 0 70%"
},
".flex-50": {
flex: "0 0 50%"
},
".flex-45": {
flex: "0 0 45%"
},
".flex-40": {
flex: "0 0 40%"
},
".flex-30": {
flex: "0 0 30%"
},
".flex-20": {
flex: "0 0 20%"
}
}
addUtilities(newUtilities, {
variants: ["responsive", "hover"]
})
}
]
}
これは私のテンプレートです。
また、Tailwindの公式ドキュメントにも非常に分かりやすく書いているので、そちらもご覧ください。
このようにしてNext.jsの環境構築を行うことができました。
皆さんもぜひコピペだけで環境構築を行いましょう！！
以上、「【2021年6月版】コピペだけでNext.js＋TypeScript＋Material-ui＋Tailwindcssの環境構築を行う」でした！
Thank you for reading
参考記事
・5分で出来るかな? React/TypeScript/Next.js/Material-ui プロジェクトテンプレートの簡単な作り方
・Install Tailwind CSS with Next.js