Scaffold Next.js project with common setup
✓Works with OpenClaudeYou are a Next.js scaffolding expert. The user wants to create a new Next.js project with a standard, production-ready setup including TypeScript, ESLint, Tailwind CSS, and a basic project structure.
What to check first
- Verify Node.js version:
node --version(requires v18.17 or later) - Check if
create-next-appis available:npx create-next-app@latest --version - Ensure you have write permissions in the target directory
Steps
- Run
npx create-next-app@latest my-nextjs-appto bootstrap the project with interactive prompts - Answer the configuration prompts: select TypeScript (yes), ESLint (yes), Tailwind CSS (yes),
src/directory (yes), and App Router (yes) - Navigate into the project:
cd my-nextjs-app - Install additional dev dependencies for better DX:
npm install -D prettier eslint-config-prettier - Create a
prettier.config.jsfile in the project root with formatting rules - Update
.eslintrc.jsonto extend Prettier config and avoid conflicts - Create the basic app structure: ensure
app/layout.tsxandapp/page.tsxexist (created by default) - Run
npm run devto start the development server onhttp://localhost:3000 - Verify the project builds:
npm run build(checks for TypeScript and ESLint errors)
Code
// prettier.config.js
module.exports = {
semi: true,
singleQuote: true,
tabWidth: 2,
trailingComma: 'es5',
printWidth: 80,
arrowParens: 'always',
};
// Updated .eslintrc.json (add to existing)
{
"extends": [
"next/core-web-vitals",
"prettier"
],
"rules": {
"react/display-name": "warn",
"react-hooks/rules-of-hooks": "error",
"@next/next/no-img-element": "warn"
}
}
// app/layout.tsx (example structure)
import type { Metadata } from 'next';
import './globals.css';
export const metadata: Metadata = {
title: 'My Next.js App',
description: 'Generated by create-next-app',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
{children}
</body>
</html>
);
}
// app/page.tsx (example home page)
export default function Home() {
Note: this example was truncated in the source. See the GitHub repo for the latest full version.
Common Pitfalls
- Treating this skill as a one-shot solution — most workflows need iteration and verification
- Skipping the verification steps — you don't know it worked until you measure
- Applying this skill without understanding the underlying problem — read the related docs first
When NOT to Use This Skill
- When a simpler manual approach would take less than 10 minutes
- On critical production systems without testing in staging first
- When you don't have permission or authorization to make these changes
How to Verify It Worked
- Run the verification steps documented above
- Compare the output against your expected baseline
- Check logs for any warnings or errors — silent failures are the worst kind
Production Considerations
- Test in staging before deploying to production
- Have a rollback plan — every change should be reversible
- Monitor the affected systems for at least 24 hours after the change
Related Scaffolding Skills
Other Claude Code skills in the same category — free to download.
Express Starter
Scaffold Express.js project with structure
React Starter
Scaffold React project with Vite
TypeScript Config
Set up TypeScript configuration
ESLint Config
Configure ESLint with custom rules
Prettier Config
Set up Prettier configuration
Monorepo Setup
Set up monorepo with Turborepo/Nx
Jest Config
Configure Jest testing framework
Vitest Config
Configure Vitest testing framework
Want a Scaffolding skill personalized to YOUR project?
This is a generic skill that works for everyone. Our AI can generate one tailored to your exact tech stack, naming conventions, folder structure, and coding patterns — with 3x more detail.