Mocking up web app with Nextal^(speed)

Live Demo

Features

• ⚡️ Next 16 with React 19 - Using the /app folder.
• 🦾 TypeScript, of course (with strict mode enabled)
• 🫀 Vitest - unitary testing made easy
• 🎨 Tailwind CSS 4 - next generation utility-first CSS with inline classes
• 🌚 Dark Mode
• 👑 Atomic Design organization
• 🗂 Absolute imports
• 😃 Hero icons
• ☁️ Deploy on Vercel, zero-config

Coding Style

• ESLint
• Prettier

Dev tools

• TypeScript
• Commit lint - helps your team adhering to a commit convention
• Vercel - zero-config deployment

Try it now!

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit jvidalv/nextal my-nextjs-app
cd my-nextjs-app
yarn # If you don't have yarn installed, run: npm install -g yarn

Checklist

When you use this template, try follow the checklist to update your info properly

• Rename name and author fields in package.json
• Change the author name in LICENSE
• Change the title in index.html
• Change the favicon in public
• Modify the manifest in public
• Clean up the README's

And, enjoy :)

Usage

Development

Type:

yarn dev

Then visit http://localhost:3000

Build

To build like if it was for production run

yarn build
yarn start

Then you can visit http://localhost:3000 and check that everything works as expected.

Deploy to Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Quick Deploy

Manual Deployment

1. Push your code to a Git repository (GitHub, GitLab, or Bitbucket)
2. Go to Vercel and import your repository
3. Vercel will automatically detect Next.js and configure the build settings
4. Click "Deploy" and your app will be live in about a minute!

Configuration

No configuration needed! Vercel automatically:

• Detects Next.js 16 and uses the correct build command
• Configures environment variables (if you add them)
• Sets up automatic deployments on every push
• Provides preview deployments for pull requests

For more details, check out the Next.js deployment documentation.

Environment Variables

If you need environment variables:

1. Create a .env.local file locally (already in .gitignore)
2. Add your variables to Vercel's dashboard under Settings → Environment Variables
3. Prefix client-side variables with NEXT_PUBLIC_

Husky Git Hooks

If pre-commit hooks are not working, run:

yarn prepare

This installs Husky git hooks. The command runs automatically after yarn install.

Why

I have created several NextJs webs recently. Setting the configs up is kinda the bottleneck for me to make the ideas simply come true within a very short time.

So I made this starter template for myself to create apps more easily, along with some good practices that I have learned from making those apps. Feel free to tweak it or even maintains your own forks.