https://github.com/ahmedbaset/next-template
Next.js Starter Template with TypeScript, Tailwindcss, Shadcn-ui, ESLint, and Prettier
https://github.com/ahmedbaset/next-template
nextjs shadcn shadcn-ui tailwindcss template
Last synced: 3 months ago
JSON representation
Next.js Starter Template with TypeScript, Tailwindcss, Shadcn-ui, ESLint, and Prettier
- Host: GitHub
- URL: https://github.com/ahmedbaset/next-template
- Owner: AhmedBaset
- License: mit
- Created: 2023-06-23T07:47:39.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-20T07:25:19.000Z (about 1 year ago)
- Last Synced: 2024-04-20T08:32:26.348Z (about 1 year ago)
- Topics: nextjs, shadcn, shadcn-ui, tailwindcss, template
- Language: TypeScript
- Homepage: https://next-tm.vercel.app
- Size: 905 KB
- Stars: 39
- Watchers: 1
- Forks: 2
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# Next.js Starter Template
This template is up to Next.js `13.5.3`. Please run `pnpm update --latest` after creating your project.
> [!NOTE]
> BTW, [dependabot](https://docs.github.com/en/code-security/dependabot/dependabot-version-updates) is already configured in the template. this should keep the project up-to-date. Moreover, with your first push to github, It will open PRs to update the dependencies.
[](https://github.com/AhmedBaset/next-template/actions/workflows/CI.yml)
## Create a new project
Copy the command below and run it in your terminal let the magic happen.
```bash
# with pnpm (recommended)
pnpm create next-app -e https://github.com/AhmedBaset/next-template my-app
# with npm
npx create-next-app -e https://github.com/AhmedBaset/next-template my-app
# with yarn
yarn create next-app -e https://github.com/AhmedBaset/next-template my-app
```
> **Note**: When you use this template, VScode will prompt you to install recommended extensions and settings.
## Features
- Next.js 13
- TypeScript
- Tailwind CSS
- shadcn/ui & radix-ui
- lucide-icons
- dark/light mode
- Environment variables type safety [Read more in `./env.mjs` file](./env.mjs)
- Type safty for `next/link` href
> The experimental `typedRoutes` feature of Next.js is enabled by default. once you run `dev` or `build` command, Next.js will generate a link definition in `.next/types` that contains information about all existing routes in your application, which TypeScript can then use to provide feedback in your editor about invalid links. [Read more](https://nextjs.org/docs/app/building-your-application/configuring/typescript#statically-typed-links)
- Github Action for checking formatting, linting and typechecking
- VSCode recommended settings & extensions
- ESLint
- Prettier with sorting imports
- Ready to use PWA [Read More in `next.config.js`](./next.config.js)
## Scripts
This template uses `pnpm` as the package manager. If you want to use other package managers, you can delete `pnpm-lock.yaml` and run `npm install` or `yarn install`.
- `dev`: Start the development server
- `build`: Build for production
- `start`: Start production server
- `preview`: build and start production server
- `lint`: Lint code
- `format`: Format code
- `format:check`: Check code formatting
- `typecheck`: Check types
- `ci-check`: Run all checks
### To install a component from `shadcn/ui` and `radix-ui`:
```sh
pnpm shadcn-ui add [--overwrite]
```
## TODOs:
- [ ] Configure `next-auth`
- [ ] Configure `Prisma`
- [ ] Configure `Husky`, `lint-staged`