How To Style Your Next.JS Projects EXACTLY Like Google (in TypeScript)

Great article Jarrod, the pre-commit script looks really good.

Though I would also suggest to checkout lint-staged package.

Husky+LintStaged will allow you to configure commit hooks right from package.json

Keep up the good writing.

Thanks a lot for this article jarrod. It really going to be helpful for me

Amazing article, awesome. But just to give my few cents about this:

Not to worry, all that it's saying is that we need two things: React imported if we want to use JSX

As of React v17 you don't need to import react just for JSX

Hi Jarrod,

Great article, I have a similar kind of setup. One thing which does not work in a nextjs app with eslint / prettier is that custom directories like a hooks or an utils directory do not get formatted. Any idea how to fix that? I googled quite a lot the only thing I found is adding the directories in the next.config.js file, but that only seems to work after building the application.

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  eslint: {
    dirs: ['pages', 'components', 'utils', 'lib', 'hooks', 'types']
  }
}