Let’s get your Next.js project setup right from the start. On Day 3 you’ll initialize a new Next.js app, clean the boilerplate, and organize folders so your code stays tidy as the project grows. This guide shows a simple step-by-step project setup, a recommended folder structure, and small examples you can copy — no fluff, just what you need to build confidently.
How to do a solid Next.js project setup
- Initialize —
npx create-next-app@latestand choose TypeScript or JavaScript. - Use src/ or app/ — prefer
/srcwith the new/approuter for modern Next.js apps. - Install core deps — Tailwind, ESLint, Prettier, and your chosen state library (RTK, Zustand, etc.).
- Environment — add
.env.localand document required keys in.env.example. - Git — create a repo, add a clear .gitignore, and make the first commit.
Quick example: initialize and clean
Run these commands to start fast:
npx create-next-app@latest my-app
cd my-app
git init
rm -rf README.md src/pages/api/*
Recommended folder structure
/src
/app
/api
/dashboard
layout.tsx
page.tsx
/components
/lib
/hooks
/styles
/public
/utils
/config
- /app — routes, layouts, server components.
- /components — small, reusable UI pieces.
- /lib — API clients, Prisma or DB helpers.
- /hooks — custom React hooks.
- /utils — pure helpers and formatters.
- /public — images and static assets.
Why this structure works
It separates UI from logic. It makes onboarding easier. Tests and features map to folders. When your app grows, adding a feature folder or grouping related pages is straightforward.
Environment & tooling checklist
- ESLint + Prettier — consistent code style.
- Tailwind CSS — fast UI without custom CSS bloat.
- TypeScript — safer refactors (optional but recommended).
- CI — GitHub Actions for lint and tests on push.
- Secrets — never commit .env.local; use secret storage in CI/CD.
Example: Tailwind quick setup
- Install:
npm install -D tailwindcss postcss autoprefixer - Init:
npx tailwindcss init -p - Add to
globals.css:@tailwind base; @tailwind components; @tailwind utilities;
Common mistakes and how to avoid them
- Mixing responsibilities: Don’t put API logic inside components. Use
/libor/api. - Missing env docs: Keep
.env.exampleupdated for teammates. - Ignoring linting: Add lint rules early; it prevents many bugs.
- Over-nesting files: Avoid deep folder trees — keep readability first.
Small examples to copy
Simple layout (app/layout.tsx)
export default function RootLayout({ children }) {
return (
)
}
API helper (src/lib/api.js)
export async function fetcher(url, opts) {
const res = await fetch(url, opts);
if (!res.ok) throw new Error('Request failed');
return res.json();
}When to use /src vs root
/src to group all application code in one place. Use root when you prefer simpler paths. Pick one and be consistent.Conclusion — key takeaways
- Initialize with
create-next-app. - Prefer
/src+/approuter for modern projects. - Document env variables and add linting early.
- Keep components small and logic reusable in
/libor/utils.
