Mocking up web app with Nextal(speed)
Features
- ⚡️ Next 12 with React 18
- 🦾 TypeScript, of course
- 🫀 Jest - unitary testing made easy
- 🎨 Tailwind with JIT - next generation utility-first CSS
- 🌚 Dark Mode
- 🪢 CSS Modules
- 👑 Atomic Design organization
- 🗂 Absolute imports
- 😃 Hero icons
- ☁️ Deploy on Netlify, zero-config
Coding Style
Dev tools
- TypeScript
- Commit lint - helps your team adhering to a commit convention
- Netlify - 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
nameandauthorfields inpackage.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 Netlify and select your repository, OK along the way, and your App will be live in a minute.
Issues
Dark mode
With CSS-Modules the "global" css-var .dark is not visible inside .module.css files, thus the Tailwind variant dark:x does not work.
In order for it to work inside module.css files you must leverage to :global, example:
:global(.dark) .title {
@apply text-white;
}
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.
