🙄

【Next.js】基礎から始めるNext.js API Routes【10Flowbite Setup】

2022/12/19に公開

【10Flowbite Setup】

YouTube: https://youtu.be/X-SjHENvAXo

https://youtu.be/X-SjHENvAXo

今回は「Flowbite」を「Next.js」で使用できるようにセッティングを行います。

https://flowbite.com/docs/getting-started/next-js/

上記のセッティングができましたら、
最後に「heroicons」のインストールもお願いします。

https://github.com/tailwindlabs/heroicons

インストールコマンド
npm install flowbite flowbite-react --save
npm install @heroicons/react
package.json
  "dependencies": {
    "@heroicons/react": "^2.0.13",
    "flowbite": "^1.5.5",
    "flowbite-react": "^0.3.7",
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.20",
    "tailwindcss": "^3.2.4"
  }

「Flowbite」のセッティングは「tailwind.config.js」のファイルに行います。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './node_modules/flowbite-react/**/*.js',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [require('flowbite/plugin')],
}

Discussion