Table of Contents
🚀 Simple templete with base configurations written in Next.js, Tailwind CSS and TypeScript.
⚡️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Zustand, VSCode, Docker, Tailwind CSS, HeadlessUI.
Clone this project and use it to create your own Next.js project.
This section should list any major frameworks/libraries used to bootstrap our project.
Instructions on setting up project locally.
- Node.js (>= 14.19.0) and npm
- Yarn (>= 1.22.0)
- ✍🏻 Minimal code
- 💐 SEO-friendly
- 🚀 Production-ready
Developer experience first:
- 🔥 Next.js for Static Site Generator
- 🎨 Integrate with Tailwind CSS and Headless UI
- 💅 PostCSS for processing Tailwind CSS and integrated to
styled-jsx - 🎉 Type checking TypeScript
- ✅ Strict Mode for TypeScript and React 18
- ✏️ Linter with ESLint (default NextJS, NextJS Core Web Vitals and Airbnb configuration)
- 🛠 Code Formatter with Prettier
- 🦊 Husky for Git Hooks
- 🗂 VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript
- 🤖 SEO metadata, JSON-LD and Open Graph tags with Next SEO
- 🐳 One command deployment with Docker
Built-in feature from Next.js:
- ☕ Minify HTML & CSS
- 💨 Live reload
- ✅ Cache busting
-
Get a free API_URL at https://example.com
-
Install packages
yarn
-
Touch .env file
touch .env
-
Enter your API_URL in
API_URL=https://example.com NEXT_PUBLIC_API_URL=https://example.com -
Then, you can run locally in development mode with live reload:
yarn dev
Open http://localhost:3000 with your favorite browser to see your project. For your information, Next JS need to take some time to compile the project for your first time.
- folders & custom hooks -> camel case
- files in pages (routing) -> kebab case
- files in other folders -> pascal case
- custom hooks, modules, enums: -> [...].ts
- pages + components: -> [...].tsx
.
├── README.md # README file
├── next.config.js # Next JS configuration
├── public # Public folder
│ └── images # Image used by default template
│ └── png
│ └── jpg
│ └── svg
├── src
│ ├── components # All app components, separate by modules, pages
│ ├── example # Example components
│ │ └── Logo.tsx # Logo components
│ │ └── ... # others
│ │
│ └── home # Homepage components
│
│ ├── data # JSON file to render text, internal data files,...(naming & structure same components)
│ ├── layout # Atomic layout component
│ ├── pages # Next JS pages
│ ├── services # Separate logic modules, custom hooks,...(naming & structure same components)
│ ├── stores # Zustand files (create store, interface, logic,...)
│ ├── styles # Global & modules CSS files
│ ├── templates # Default template
│ ├── types # Interfaces, class, generic,... (naming & structure same components)
│ └── utilities # Utility folder (enums, utils modules,...)
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
├── Dockerfile # Dockerfile
├── docker-compose.yml # docker-compose configuration
└── ... # Other configuration files (prettier, ignore files,...)
yarn run test-all
You can see the results locally in production mode with:
$ yarn build
$ yarn start
The generated HTML and CSS files are minified (built-in feature from Next js). It will also removed unused CSS from Tailwind CSS.
You can create an optimized production build and you deploy with any hosting service by Docker:
$ docker-compose up --build -d
If you are VSCode users, you can have a better integration with VSCode by installing the suggested extensions and settings in .vscode
yarn add -D @commitlint/{config-conventional,cli}
npx husky add .husky/commit-msg ""
<type>(<scope>): <short summary>
│ │ │
│ │ └─⫸ Summary in present tense. Not capitalized. No period at the end.
│ │
│ └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|
│ elements|forms|http|language-service|localize|platform-browser|
│ platform-browser-dynamic|platform-server|router|service-worker|
│ upgrade|zone.js|packaging|changelog|docs-infra|migrations|
│ devtools
│
└─⫸ Commit Type: build|ci|chore|docs|feat|fix|perf|refactor|revert|style|test
Must be one of the following:
- build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
- ci: Changes to our CI configuration files and scripts (examples: CircleCi, SauceLabs)
- chore: add something without touching production code (Eg: update npm dependencies)
- docs: Documentation only changes
- feat: A new feature
- fix: A bug fix
- perf: A code change that improves performance
- refactor: A code change that neither fixes a bug nor adds a feature
- revert: Reverts a previous commit
- style: Changes that do not affect the meaning of the code (Eg: adding white-space, formatting, missing semi-colons, etc)
- test: Adding missing tests or correcting existing tests
The <type> and <summary> fields are mandatory, the (<scope>) field is optional.
See the open issues for a full list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt for more information.
I've included a few of my favorites to kick things off!