jvidalv/nextal

Starter template for NextJs with TypeScript. Supports Tailwind with CSS-Modules. Vitest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Mocking up web app with Nextal^(speed)

Live Demo

Features

• ⚡️ Next 14 with React 18 - Using the /app folder.
• 🦾 TypeScript, of course
• 🫀 Vitest - unitary testing made easy
• 🎨 Tailwind - next generation utility-first CSS
• 🌚 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 on Netlify

Go to Vercel and select your repository, OK along the way, and your App will be live in a minute.

Husky

If pre-commit hooks are not working be sure that you have installed husky: husky install.

By default this command should be triggered after yarn/npm deps are installed.

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.