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.

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.

List of Components

Generic

• PageHeader: title and subtitle for a page.
• TableOfContents: table of contents.
• InfoBox: box with centered text information.
• CTAButton: call-to-action button.
• ThemeToggle: theme toggle button.
• CodeBlock: code block with copy button.
• FloatingNav: floating navigation.
• ScrollIndicator: progress bar showing scroll position.

Project

• Header: header area with navigation.
• Footer: footer area with links and social media.

Getting Started

First, clone the repository:

git clone https://github.com/KenanBek/nextjs-app-template.git

You can also clone with another name:

git clone https://github.com/KenanBek/nextjs-app-template.git my-project

Switch to the project directory and install the dependencies:

npm install

Finally, start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open 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 - 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

Additionally, take a look at the following resources to learn more about Next.js:

• TypeScript Programming Language - learn about TypeScript.
• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• Tailwind CSS - learn about Tailwind CSS.