Introduction

A starter project for Next.js with Tailwind CSS and Typescript. This starter kit already pre-configured with absolute import, TailwindUI, Framer Motion, and some other goodies. This starter also provides Dockerfile, just in case you want to deploy using containerization or even Kubernetes.

Quick Start

Installation

# 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.

• Next.js app router playground - learn more about Next.js app directory.
• Dynamic Metadata - learn more about SEO using dynamic metadata.

Build Docker Container

# 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 deployments so that pushing to master will deploy to production! 🚀

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 18.16.0 or greater than version 18 on the environment variables setting. Visit Cloudflare pages docs for more information.

For the preview branch:

NEXT_PUBLIC_SITE_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.

Copyrights in this project are retained by their contributors. See the license file for more information.

---

_{🤫 Psst! If you like my work you can support me via GitHub sponsors.}