feat: scaffolding nextjs

[nvh95]

Description

• I'm migrating my blog using Gatsby to NextJS. This is the first PR in the migration process where I scaffolding NextJS project

• Install next

• Install taildwindcss

• Remove unused code

Question

• To install Taillwindcss, we need to update postcss.config.js. Follow document here (https://nextjs.org/docs/advanced-features/customizing-postcss-config#customizing-plugins), if we customize PostCSS configuration file, we disable the default behavior, so we need to config it by ourself to preverse features like Autoprefixer and fix Cross-browser Flexbox bugs and IE11 compatibility.

// postcss.config.js
module.exports = {
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}

However, follow tailwindcss guide here (https://tailwindcss.com/docs/guides/nextjs), after running command npx tailwindcss init -p, we have

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

I am wondering if I am using above postcss settings, do I get fix Cross-browser Flexbox bugs and IE11 compatibility features?

• Answer: follow tailwindcss's guide will disable the fix for Cross-browser Flexbox bugs and IE 11 compatibility, we might need to enable this if we need. But as Adam Wathan suggests, we might not need them
  Reference: Potential incomplete postcss configuration on the Next.js guide tailwindlabs/tailwindcss.com#660 (comment)

[nvh95]

Actually, postcss-flexbugs-fixes tries to fix bugs 4, 6, and 8.1a. All those bugs affects IE only, so we do not to use postcss-flexbugs-fixes since I do not IE anyway.