
tailwindcss.com
daisyui.com
fontawesome.com
今回はNext.js環境に、デザインを意識したコンポーネント群を導入、初心者なのでとりあえずフレームワークを満載にして、フロントエンド開発環境をパワーアップさせてみます
今回導入するモノ
tailwindcss:cssが簡単になるcssフレームワーク的なな
daisyUI:デザインが完成されたtailwindcssの追加ライブラリ的な
Font Awesome:アイコンライブラリ的な
tailwindCSSの導入
ここを参照しつつ、環境にあわせてアレンジして設定していきます
Install Tailwind CSS with Create React App - Tailwind CSS
2つのコマンド実行
Next.jsのプロジェクト配下で(場所重要)
added 54 packages, changed 2 packages, and audited 284 packages in 14s
74 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js
tailwind.config.js, postcss.config.js が作成されます
Reactデフォルトの pagesを使うので、tailwind.config.jsに下記を追記
<tailwind.config.js>
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
標準のCSSファイルに追記
<styles/global.css>
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
これで、こんな感じで書くとスタイル(テキストを赤く)が適用されます
<pages/index.html>
<div className='text-red-500'>Welcome to UUID Xplorer</div>

React版のインストール方法を参照してインストールします
React | Font Awesome Docs
Next.jsのプロジェクト配下で実行(場所重要)
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome
Next.js用の適用方法を確認しつつ、
Use React with... | Font Awesome Docs
Next.jsですべてのページ共通で読み込まれる _app.tsx に追記
<pages/_app.tsx>
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
export default MyApp
アイコンを使いたいページにアイコンごとに読み込みを行う
<pages/index.tsx>
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
//fontawesome
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowCircleRight } from '@fortawesome/free-solid-svg-icons'
const Home: NextPage = () => {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<div className='text-red-500'>Welcome to UUID Xplorer</div>
<FontAwesomeIcon icon={faArrowCircleRight} size="2x" />
</main>
</div>
)
}
export default Home

docker-composeの整備
色々とインストールをしているうちに、package.json が成長していますね
{
"name": "uuid-xplorer",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
"daisyui": "^2.13.6",
"next": "12.1.4",
"react": "18.0.0",
"react-dom": "18.0.0"
},
"devDependencies": {
"@types/node": "17.0.23",
"@types/react": "17.0.43",
"@types/react-dom": "17.0.14",
"autoprefixer": "^10.4.4",
"eslint": "8.12.0",
"eslint-config-next": "12.1.4",
"postcss": "^8.4.12",
"tailwindcss": "^3.0.23",
"typescript": "4.6.3"
}
}
ここまで準備ができたら、フロントエンドコンテナとして、docker-composeを整備します
バックエンドコンテナも併せて整備
<docker-compose>
これでGithubの状況と同じものがつくれます
https://github.com/konchangakita/blog-uuid-Xplorer/tree/main/blog/0418
準備完了
ここまで開発環境の準備は完了です
次からは、Next.jsを使って実際に Webインターフェースを構築していきます