Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kenanbek/nextjs-app-template
Next.js app boilerplate and templates. For SaaS, portfolio website, landing pages, and more.
https://github.com/kenanbek/nextjs-app-template
nextjs react tailwindcss typescript
Last synced: 5 days ago
JSON representation
Next.js app boilerplate and templates. For SaaS, portfolio website, landing pages, and more.
- Host: GitHub
- URL: https://github.com/kenanbek/nextjs-app-template
- Owner: KenanBek
- Created: 2024-11-01T19:15:51.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-22T23:23:50.000Z (about 1 month ago)
- Last Synced: 2024-12-19T03:13:03.505Z (6 days ago)
- Topics: nextjs, react, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://nextjs-app-templates.vercel.app
- Size: 312 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js App Template
Next.js app template and boilerplate for SaaS, portfolio, landing page, and marketing websites.
It is ready to use template for your project with following features:
- Built-in components for various use cases (header, footer, CTA button, table of contents, etc.)
- Customizable using configuration and reusable components (reuse for different projects)
- Based on Tailwind CSS and TypeScript
Learn more about using [Wiki documentation page](https://github.com/KenanBek/nextjs-app-template/wiki).
## Components
Components are the building blocks of **Next.js App Template**. They are designed to be used in a variety of projects. All components are split into **generic** and **project** components.
Learn more about [components](https://github.com/KenanBek/nextjs-app-template/wiki#components).
### List of Components
#### Generic
- [PageHeader](https://github.com/KenanBek/nextjs-app-template/wiki/PageHeader): title and subtitle for a page.
- [TableOfContents](https://github.com/KenanBek/nextjs-app-template/wiki/TableOfContents): table of contents.
- [InfoBox](https://github.com/KenanBek/nextjs-app-template/wiki/InfoBox): box with centered text information.
- [CTAButton](https://github.com/KenanBek/nextjs-app-template/wiki/CTAButton): call-to-action button.
- [ThemeToggle](https://github.com/KenanBek/nextjs-app-template/wiki/ThemeToggle): theme toggle button.
- [CodeBlock](https://github.com/KenanBek/nextjs-app-template/wiki/CodeBlock): code block with copy button.
- [FloatingNav](https://github.com/KenanBek/nextjs-app-template/wiki/FloatingNav): floating navigation.
- [ScrollIndicator](https://github.com/KenanBek/nextjs-app-template/wiki/ScrollIndicator): progress bar showing scroll position.
#### Project
- [Header](https://github.com/KenanBek/nextjs-app-template/wiki/Header): header area with navigation.
- [Footer](https://github.com/KenanBek/nextjs-app-template/wiki/Footer): footer area with links and social media.
## Getting Started
First, clone the repository:
```bash
git clone https://github.com/KenanBek/nextjs-app-template.git
```
You can also clone with another name:
```bash
git clone https://github.com/KenanBek/nextjs-app-template.git my-project
```
Switch to the project directory and install the dependencies:
```bash
npm install
```
Finally, start the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
## Features
- [Vercel Analytics](https://vercel.com/analytics) - for tracking page views and other metrics.
## Learn more about Next.js
If you are a beginner, you can use one of my courses to start building with Next.js, Tailwind CSS, and TypeScript:
- [Next.js, Tailwind CSS, and TypeScript](https://www.codervlogger.com/how-to-build-website-app-with-nextjs-tailwindcss-cursorai-for-beginners/)
Additionally, take a look at the following resources to learn more about Next.js:
- [TypeScript Programming Language](https://www.typescriptlang.org/docs/) - learn about TypeScript.
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
- [Tailwind CSS](https://tailwindcss.com/docs/installation) - learn about Tailwind CSS.