Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/riipandi/next-start
A starter for Next.js with Tailwind CSS and Typescript. Pre-configured with absolute import some goodies.
https://github.com/riipandi/next-start
framer-motion nextjs nextjs-starter nextjs-template reactjs tailwindcss tailwindui
Last synced: 7 days ago
JSON representation
A starter for Next.js with Tailwind CSS and Typescript. Pre-configured with absolute import some goodies.
- Host: GitHub
- URL: https://github.com/riipandi/next-start
- Owner: riipandi
- License: mit
- Created: 2020-04-21T21:30:52.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-09-27T20:49:44.000Z (about 1 month ago)
- Last Synced: 2024-10-03T12:26:22.459Z (about 1 month ago)
- Topics: framer-motion, nextjs, nextjs-starter, nextjs-template, reactjs, tailwindcss, tailwindui
- Language: TypeScript
- Homepage: https://next-start.vercel.app
- Size: 5.37 MB
- Stars: 42
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Introduction
A starter project for [Next.js](https://nextjs.org/) with [Tailwind CSS](https://tailwindcss.com)
and [Typescript](https://www.typescriptlang.org/). This starter kit already pre-configured
with [absolute import](https://jsdev.org/env/nodejs/absolute-path-imports/), [TailwindUI](https://tailwindui.com),
and some [other goodies](./package.json). This starter also provides [Dockerfile](./Dockerfile),
just in case you want to deploy using containerization or even Kubernetes.
## Quick Start
### Installation
```bash
# Using pnpm is recomended
pnpm create next-app@latest myapp-name --use-pnpm -e "https://github.com/riipandi/next-start"
# If you want to use npm instead
npx create-next-app myapp-name --use-npm -e "https://github.com/riipandi/next-start"
```
> Don't forget to change `myapp-name` with your real application name.
### Up and Running
| NPM | Yarn | PNPM | Description |
| --------------- | ------------ | -------------- | ------------------------ |
| `npm install` | `yarn` | `pnpm install` | install the dependencies |
| `npm run dev` | `yarn dev` | `pnpm dev` | serve with hot reload |
| `npm run build` | `yarn build` | `pnpm build` | build for production |
| `npm run start` | `yarn start` | `pnpm start` | launch generated build |
Application will run at `http://localhost:3000`
For detailed explanation on how things work, check out [Next.js docs](https://nextjs.org/docs/getting-started).
- [Next.js app router playground](https://github.com/vercel/app-playground) - learn more about Next.js app directory.
- [Dynamic Metadata](https://nextjs.org/blog/next-13-2#built-in-seo-support-with-new-metadata-api) - learn more about SEO using dynamic metadata.
### Build Docker Container
```sh
# Build Docker image
docker build -t next-start:$(cat package.json | jq -r .version) -t next-start:latest .
# Run Docker container in background
docker run --rm -d -p 3000:3000 --name next-start next-start:latest
# Access container shell
docker run --rm -it --entrypoint sh next-start:latest
```
## Deploy your own
You'll want to fork this repository and deploy your own Next.js website. Once you have an
image generator that sparks joy, you can setup [automatic GitHub](https://vercel.com/github)
deployments so that pushing to master will deploy to production! 🚀
[](https://vercel.com/new/clone?repository-url=https://github.com/riipandi/next-start&project-name=next-start&repo-name=next-start&env=APP_BASE_URL,NEXT_PUBLIC_MAINTENANCE_MODE)
#### Vercel Configuration (optional)
If you are using monorepo you will need to configure a few things:
- Settings -> General -> Root Directory : `apps/web/`
- Settings -> Git -> Ignored Build Step : `git diff --quiet HEAD^ HEAD ./`
#### Cloudflare Deployment
You need to add `NODE_VERSION` with value `20.16.0` or greater than version 20 on the environment variables setting.
Visit [Cloudflare pages docs](https://developers.cloudflare.com/pages/platform/build-configuration/) for more information.
For the preview branch:
```env
APP_BASE_URL=${CF_PAGES_URL}
```
## Thanks to...
In general, I'd like to thank every single one who open-sources their
source code for their effort to contribute something to the open-source
community. Your work means the world! 🌍 ❤️
## License
This project is open-sourced software licensed under the [MIT license](./LICENSE).
Copyrights in this project are retained by their contributors.
See the [license file](./LICENSE) for more information.
---
🤫 Psst! If you like my work you can support me via [GitHub sponsors](https://github.com/sponsors/riipandi).