Headless WordPress with Next.js – day 2

Today I start to set up the next js. Also, for the CSS framework, I will use Tailwind CSS. For the need for UI framework, I will use https://daisyui.com/. Let’s begin the game,

First, install the Next.js framework with

npx create-next-app

After, running this command next js will be set up. It asks a question, What is your project named? I like to install it in the frontend folder. So, I answer it. Then, the next js project will be set up in the frontend folder.

Then, I will install Tailwind CSS in frontend. Let’s enter here by cd frontend
Paste the following js code at next.config.js

const path = require('path')
module.exports = {
  reactStrictMode: true,
  trailingSlash: false,
  webpackDevMiddleware: config => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300
    }

    return config
  },
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')]
  }
}

I will again to this file for more discussion in the future post.
Then, install sass package by npm i sass. This package is installed as dependencies.
Then, install postcss-flexbugs-fixes, postcss-import, postcss-preset-env, precss and tailwindcss as devDependencies with

npm i postcss-flexbugs-fixes postcss-import postcss-preset-env precss tailwindcss --save-dev

To set up postcss lets create postcss.config.js and write the following js code

module.exports = {
    plugins: {
        'postcss-import': {},
        autoprefixer: {},
        tailwindcss: {},
        'postcss-flexbugs-fixes': {},
        'postcss-preset-env': {
            autoprefixer: {
                flexbox: 'no-2009'
            },
            stage: 3,
            features: {
                'custom-properties': false
            }
        }
    }
}

Then create tailwind.config.js by

npx tailwindcss init

Let setup daisyUI as dependencies by

npm i daisyui

Finally, require daisyui in tailwind.config.js’s plugins array. The final tailwind.config.js is

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: [
    './src/components/**/*.js',
    './pages/**/*.js'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [
    require( 'tailwindcss' ),
    require( 'precss' ),
    require( 'autoprefixer' ),
    require( 'daisyui')
  ]
}

I will again to this file for more discussion in the future post. 🙂
I will create components and correspondent styles in the src folder. So, I create an src folder and move the styles folder in here.
Lets, delete all style files in the styles folder. And create index.scss and import the most required 3 CSS files in index.scss. Finally, index.scss file is

@import "../../node_modules/tailwindcss/base.css";
@import "../../node_modules/tailwindcss/components.css";
@import "../../node_modules/tailwindcss/utilities.css";

Import index.scss in pages/_app.js
Finally, pages/_app.js is

import '../src/styles/index.scss'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Open pages/index.js and write the following code. This is mainly known as JSX type language, by default React provides this type of interesting language.

export default function Home() {
return (
<div>
<a className="btn btn-primary">Button</a>
</div>
)
}

At very final, let’s test all by

npm run dev

Leave a Reply

Your email address will not be published. Required fields are marked *