How Johnny Builds New Web Projects

I start with a standard Next.js Installation then clear out the boilerplate stuff from page.tsx and package.json, yada yada yada. If you want to skip straight to code, I published Johnny Builds Next.js Starter on Github.

I pnpm add some stuff:

pnpm add eslint-config-prettier eslint-plugin-prettier prettier

Next I set up my eslint/prettier config and VSCode settings to auto-format to my standard specs.

# .prettierignore
.cache
.next
package.json
package-lock.json
public
api/socks.js
node-modules
*.md
*.mdx

// .prettierrc
{
  "endOfLine": "lf",
  "printWidth": 200,
  "semi": false,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5"
}

// .vscode/settings.json
{
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ]
}

Now, every time I save or paste, code is auto-formatted instantly. This setup also works on Cursor, which is what I’m using these days as my IDE of choice.

I also like to have this command in my package.json which makes pushing and deploying super quick by using aicommits to write the commit message for me (if I don’t like it, I can cancel).

"go": "git add . && aicommits && git push origin main",

There’s other stuff I like to have, like a shadcn/ui components config and directory, a theme provider for light/dark mode and a better default layout than the one you get from create-next-app.

I made a JohnnyBuilds Next.js Starter for my bare-bones setup to get going quickly. You can check it out on Github.

Beyond that, for data and auth I use Supabase. For email, Resend. Money stuff on Stripe. Files on S3.