Next.js App Template

Next.js app template and boilerplate for SaaS, portfolio, landing page, and marketing websites.

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.

• Generic: independent components that can be used in any project and in other project components.
• Project: components that use data from project's configuration.

List of Components

Generic

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

Project

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

Learn more about components.

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

Then, 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.

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.