Kickstarting Your Next.js Project the Right Way

From zero to a scalable frontend with modern tooling

Next.js has quickly become the go-to React framework for building modern, performant web apps. Whether you're creating a dashboard, a marketing site, or a full-stack application, Next.js offers sensible defaults, batteries-included tooling, and production-ready features out of the box.

But let’s start with something simple, creating your first Next.js app, the way professionals do it.

Bootstrap Your App

Here’s a clean, opinionated way to start a Next.js project.

Start with installing the lts version of NodeJs and adding yarn.

nvm install --lts
npm install -g yarn

Now create the NextJS app. Make sure you change <app-name>

npx create-next-app@latest <app-name> \
--typescript --use-yarn --eslint --app --src-dir \
--turbopack --no-tailwind --no-import-alias

Let’s break that down:

• --typescript: Enables TypeScript support from the start.
• --use-yarn: Chooses Yarn as your package manager (feel free to drop this if you prefer npm or pnpm).
• --eslint: Adds ESLint configuration to enforce consistent code quality.
• --app: Uses the App Router, the latest routing model introduced in Next.js 13+.
• --src-dir: Places your source files inside a src/ folder for better organization.
• --turbopack: Uses the new Rust-based Turbopack for blazing-fast dev builds.
• --no-tailwind: Skips Tailwind setup—we’ll leave CSS decisions up to you.
• --no-import-alias: Avoids setting up custom path aliases.

This is also the same as:

npx create-next-app@latest <app name> --typescript --use-yarn 

✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes

💡 Pro tip: Keep your initial setup minimal. Add tools like Tailwind or Zustand later as your app grows.

Why This Setup?

This isn't just a matter of taste. It’s a proven, scalable way to begin a real-world project. Organizing your code under src/ helps as the app scales. The App Router gives you layout-level flexibility. ESLint keeps your codebase clean. Turbopack cuts build time dramatically.

And keeping the initial stack lean? That’s not laziness—it’s intentional. It gives your team room to decide what they actually need.

What's Next?

1. Add the correct version of

node --version > .nvmrc

Now you just need to run nvm use to get the correct version of nodejs in your environment.

2. Run It Locally

cd <app-name>
yarn dev

Navigate to http://localhost:3000 and you’ll see the default Next.js welcome screen.

3. Git It Together

Initialize your Git repo and make your first commit:

git init
git add .
git commit -m "Initial commit from create-next-app"

4. Add Prettier

A formatter like Prettier pairs well with ESLint:

yarn -D add prettier eslint-plugin-prettier eslint-config-prettier

Add config files for prettier:

cat << EOF > .prettierrc
{
  "semi": true,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 80
}
EOF

cat << EOF > .prettierignore
node_modules
.next
EOF

Update your eslintrc.config.mjs to import eslintPluginPrettierRecommended in the eslintConfig array. This prevents ESLint from conflicting with Prettier’s formatting rules.

Your eslint.config.mjs should now look like:

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  eslintPluginPrettierRecommended,
];

export default eslintConfig;

If you run yarn lint it will show the formatting errors in the generated code.

To fix these add prettier to the scripts section of the package.json

npm pkg set "scripts.prettier"="prettier . --check"
npm pkg set "scripts.prettier:fix"="prettier . --write"

Now running yarn prettier to show the errors and yarn prettier:fix to fix them.

5. Configure CI

Add a basic GitHub Actions workflow:

mkdir -p .github/workflows

Then create the following file:

# .github/workflows/build.yml
name: Lint and Build

on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 22
      - run: yarn install --frozen-lockfile
      - run: yarn lint
      - run: yarn build

Now when you create a PR or push to main the Github Action will run to make sure you code is well formatting and builds.

DevOps Tips

• Environment Variables: Use .env.local for local secrets. Define them in Vercel or your CI for production.
• CI/CD: Vercel deploys from GitHub by default. For custom pipelines, check out GitHub Actions or Turborepo if you’re managing a monorepo.
• Monitoring: Add a lightweight observability layer early. Try Sentry or LogRocket.

Final Thoughts

Getting started with Next.js is deceptively simple. But making smart decisions early can set your team up for long-term success. Keep your stack tight. Stay close to the defaults. And gradually introduce complexity when your use case demands it. Not before.

“The fastest way to build is to start with less.” — Every DevOps engineer, ever

I've created a Github Repo showing all this: https://github.com/markcallen/nextjs-kickstart-example