| name | new-nextjs |
| description | This skill should be used when the user asks to "create a Next.js app", "set up a Next.js project", "scaffold a Next.js site", "new next app", or mentions "nextjs", "next.js", "SSR", "server-rendered", or "server-side rendering" in the context of starting a new project. |
Next.js Template Setup
Scaffold a new Next.js project from the niskan516/web-template repository.
Prerequisites
git installed
bun installed (package manager)
Step 1: Collect Information
Ask the user for:
| Input | Format | Used In |
|---|
| Project name | kebab-case (e.g., my-web-app) | package.json, directory name |
| App description | Short sentence | app/manifest.json description field |
If invoked from the new-project router skill, project name and target directory are already provided.
Step 2: Clone and Extract
The Next.js template lives in a subfolder of a monorepo. Extract it:
TEMP_DIR=$(mktemp -d)
git clone --depth 1 https://github.com/niskan516/web-template.git "$TEMP_DIR"
TARGET_DIR="<target-directory>/<project-name>"
cp -r "$TEMP_DIR/nextjs/" "$TARGET_DIR"
for f in .gitignore biome.json; do
[ -f "$TEMP_DIR/$f" ] && cp "$TEMP_DIR/$f" "$TARGET_DIR/"
done
rm -rf "$TEMP_DIR"
Step 3: Customize Placeholders
Perform these exact replacements in the target directory:
| File | Find | Replace With |
|---|
package.json | nextjs-template | <project-name> |
app/manifest.json | Next.js Template | <project-name> in title case |
app/manifest.json | Next.js App | <project-name> in title case (short name) |
app/manifest.json | A modern Next.js SSR template with PWA support | <app-description> |
Step 4: Clean Up
Remove template-only files if any exist:
rm -f USING_THIS_TEMPLATE.md
Step 5: Initialize
cd "$TARGET_DIR"
rm -rf .git
git init
bun install
git add -A
git commit -m "Initial commit from nextjs template"
Step 6: Verify
bun run check:all
Report the results to the user. If checks fail, investigate and fix before proceeding.
Tech Stack Summary
The scaffolded project includes:
| Category | Technology |
|---|
| Framework | Next.js 15 (App Router) |
| UI | React 19, Tailwind CSS v4, shadcn |
| State | Zustand v5, TanStack Query v5 |
| i18n | Lingui v5 |
| PWA | Serwist |
| Linting | Biome |
| Git hooks | Lefthook |
| Testing | Vitest + Playwright |