├── .husky
├── .gitignore
├── pre-commit
└── common.sh
├── src
├── lib
│ ├── index.ts
│ └── utils.ts
├── components
│ ├── index.ts
│ └── layout
│ │ └── index.tsx
├── api
│ ├── hello-edge.ts
│ └── hello.ts
├── app
│ ├── layout.tsx
│ ├── page.tsx
│ └── globals.css
└── styles
│ └── home.module.css
├── .npmrc
├── public
├── favicon.ico
└── vercel.svg
├── postcss.config.js
├── next.config.ts
├── .editorconfig
├── renovate.json
├── next-env.d.ts
├── .prettierrc.js
├── components.json
├── .gitignore
├── eslint.config.mjs
├── tsconfig.json
├── LICENSE.md
├── tailwind.config.js
├── package.json
└── README.md
/.husky/.gitignore:
--------------------------------------------------------------------------------
1 | _
2 |
--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | pnpm lint-staged
2 |
--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | export * from './utils'
2 |
--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './layout'
2 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | save-exact=true
2 | strict-peer-dependencies=false
3 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhpt/nextjs-starter/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | '@tailwindcss/postcss': {},
4 | },
5 | }
6 |
--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from 'next'
2 |
3 | const nextConfig: NextConfig = {
4 | /* config options here */
5 | }
6 |
7 | export default nextConfig
8 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | indent_style = space
5 | indent_size = 2
6 | charset = utf-8
7 | end_of_line = lf
8 | trim_trailing_whitespace = true
9 | insert_final_newline = true
--------------------------------------------------------------------------------
/.husky/common.sh:
--------------------------------------------------------------------------------
1 | command_exists () {
2 | command -v "$1" >/dev/null 2>&1
3 | }
4 |
5 | # Workaround for Windows 10, Git Bash
6 | if command_exists winpty && test -t 1; then
7 | exec < /dev/tty
8 | fi
9 |
--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["config:base"],
3 | "semanticCommits": true,
4 | "prCreation": "not-pending",
5 | "labels": ["type: dependencies"],
6 | "schedule": ["every weekend"],
7 | "automerge": true
8 | }
9 |
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import type { ClassValue } from 'clsx'
2 | import { clsx } from 'clsx'
3 | import { twMerge } from 'tailwind-merge'
4 |
5 | export function cn(...inputs: ClassValue[]) {
6 | return twMerge(clsx(inputs))
7 | }
8 |
--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
6 |
--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | printWidth: 100,
3 | tabWidth: 2,
4 | semi: false,
5 | singleQuote: true,
6 | quoteProps: 'as-needed',
7 | trailingComma: 'all',
8 | arrowParens: 'always',
9 | proseWrap: 'preserve',
10 | endOfLine: 'lf',
11 | }
12 |
--------------------------------------------------------------------------------
/src/api/hello-edge.ts:
--------------------------------------------------------------------------------
1 | import type { NextRequest } from 'next/server'
2 |
3 | export const config = {
4 | runtime: 'edge',
5 | }
6 |
7 | export default async function handler(req: NextRequest) {
8 | return new Response(`Hello edge from ${req.url}`, {
9 | status: 200,
10 | })
11 | }
12 |
--------------------------------------------------------------------------------
/src/api/hello.ts:
--------------------------------------------------------------------------------
1 | import type { NextApiRequest, NextApiResponse } from 'next'
2 |
3 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
4 | export default (req: NextApiRequest, res: NextApiResponse) => {
5 | res.statusCode = 200
6 | res.json({ name: `John Doe` })
7 | }
8 |
--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "new-york",
4 | "rsc": true,
5 | "tsx": true,
6 | "tailwind": {
7 | "config": "tailwind.config.js",
8 | "css": "src/app/globals.css",
9 | "baseColor": "gray",
10 | "cssVariables": true,
11 | "prefix": ""
12 | },
13 | "aliases": {
14 | "components": "@/components",
15 | "utils": "@/lib/utils",
16 | "ui": "@/components/ui",
17 | "lib": "@/lib",
18 | "hooks": "@/hooks"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 |
33 | # vercel
34 | .vercel
35 |
--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import { defineConfig } from 'eslint-config-hyoban'
3 |
4 | export default defineConfig(
5 | {
6 | ignores: ['**/*.d.ts'],
7 | react: 'next',
8 | tailwindCSS: false,
9 | },
10 | {
11 | rules: {
12 | '@stylistic/arrow-parens': 'off',
13 | 'import/no-anonymous-default-export': 'off',
14 | },
15 | },
16 | {
17 | files: ['**/*/package.json', 'package.json'],
18 | rules: {
19 | 'package-json/valid-package-def': 0,
20 | 'package-json/valid-name': 0,
21 | },
22 | },
23 | )
24 |
--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import './globals.css'
2 |
3 | import type { Metadata } from 'next'
4 | import { Inter } from 'next/font/google'
5 |
6 | import { Layout } from '@/components'
7 |
8 | const inter = Inter({ subsets: ['latin'] })
9 |
10 | export const metadata: Metadata = {
11 | title: 'Create Next App',
12 | description: 'Generated by create next app',
13 | }
14 |
15 | export default function RootLayout({
16 | children,
17 | }: Readonly<{
18 | children: React.ReactNode
19 | }>) {
20 | return (
21 |
22 |
23 | {children}
24 |
25 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2015",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "baseUrl": ".",
17 | "paths": {
18 | "@/*": ["./src/*"]
19 | },
20 | "incremental": true,
21 | "plugins": [
22 | {
23 | "name": "next"
24 | }
25 | ]
26 | },
27 | "exclude": ["node_modules"],
28 | "include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", ".next/types/**/*.ts"]
29 | }
30 |
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Abel Chang
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | darkMode: ['class'],
3 | content: ['./src/**/*.{js,ts,jsx,tsx}'],
4 | theme: {
5 | extend: {
6 | borderRadius: {
7 | lg: 'var(--radius)',
8 | md: 'calc(var(--radius) - 2px)',
9 | sm: 'calc(var(--radius) - 4px)',
10 | },
11 | colors: {
12 | background: 'hsl(var(--background))',
13 | foreground: 'hsl(var(--foreground))',
14 | card: {
15 | DEFAULT: 'hsl(var(--card))',
16 | foreground: 'hsl(var(--card-foreground))',
17 | },
18 | popover: {
19 | DEFAULT: 'hsl(var(--popover))',
20 | foreground: 'hsl(var(--popover-foreground))',
21 | },
22 | primary: {
23 | DEFAULT: 'hsl(var(--primary))',
24 | foreground: 'hsl(var(--primary-foreground))',
25 | },
26 | secondary: {
27 | DEFAULT: 'hsl(var(--secondary))',
28 | foreground: 'hsl(var(--secondary-foreground))',
29 | },
30 | muted: {
31 | DEFAULT: 'hsl(var(--muted))',
32 | foreground: 'hsl(var(--muted-foreground))',
33 | },
34 | accent: {
35 | DEFAULT: 'hsl(var(--accent))',
36 | foreground: 'hsl(var(--accent-foreground))',
37 | },
38 | destructive: {
39 | DEFAULT: 'hsl(var(--destructive))',
40 | foreground: 'hsl(var(--destructive-foreground))',
41 | },
42 | border: 'hsl(var(--border))',
43 | input: 'hsl(var(--input))',
44 | ring: 'hsl(var(--ring))',
45 | chart: {
46 | 1: 'hsl(var(--chart-1))',
47 | 2: 'hsl(var(--chart-2))',
48 | 3: 'hsl(var(--chart-3))',
49 | 4: 'hsl(var(--chart-4))',
50 | 5: 'hsl(var(--chart-5))',
51 | },
52 | },
53 | },
54 | },
55 | variants: {
56 | extend: {},
57 | },
58 | plugins: [require('tailwindcss-animate')],
59 | }
60 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nextjs-starter",
3 | "version": "1.0.0",
4 | "private": true,
5 | "description": "A Next.js starter that includes all you need to build amazing projects",
6 | "author": "abel chang",
7 | "license": "MIT",
8 | "keywords": [
9 | "nextjs",
10 | "starter",
11 | "typescript"
12 | ],
13 | "scripts": {
14 | "build": "next build",
15 | "dev": "next dev --turbo",
16 | "export": "next build && next export",
17 | "format": "prettier --ignore-path .gitignore \"src/**/*.+(ts|js|tsx)\" --write",
18 | "lint": "eslint --ignore-pattern .gitignore --fix",
19 | "prepare": "husky",
20 | "start": "next start"
21 | },
22 | "dependencies": {
23 | "@radix-ui/react-icons": "1.3.2",
24 | "class-variance-authority": "0.7.1",
25 | "clsx": "2.1.1",
26 | "immer": "11.0.1",
27 | "lucide-react": "0.556.0",
28 | "next": "16.0.7",
29 | "react": "19.2.1",
30 | "react-dom": "19.2.1",
31 | "tailwind-merge": "3.4.0",
32 | "tailwindcss-animate": "1.0.7",
33 | "zustand": "5.0.9"
34 | },
35 | "devDependencies": {
36 | "@emotion/react": "11.14.0",
37 | "@emotion/styled": "11.14.1",
38 | "@iconify-icon/react": "3.0.3",
39 | "@tailwindcss/postcss": "4.1.17",
40 | "@types/node": "24.10.1",
41 | "@types/react": "19.2.7",
42 | "@types/react-dom": "19.2.3",
43 | "@typescript-eslint/eslint-plugin": "8.48.1",
44 | "@typescript-eslint/parser": "8.48.1",
45 | "autoprefixer": "10.4.22",
46 | "eslint": "9.39.1",
47 | "eslint-config-hyoban": "4.0.10",
48 | "eslint-config-next": "16.0.7",
49 | "husky": "9.1.7",
50 | "lint-staged": "16.2.7",
51 | "postcss": "8.5.6",
52 | "prettier": "3.7.4",
53 | "tailwindcss": "4.1.17",
54 | "typescript": "5.9.3"
55 | },
56 | "lint-staged": {
57 | "./**/*.{ts,js,jsx,tsx}": [
58 | "pnpm run lint",
59 | "pnpm run format"
60 | ]
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/styles/home.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | flex: 1;
3 | display: flex;
4 | padding: 0 0.5rem;
5 | flex-direction: column;
6 | justify-content: center;
7 | align-items: center;
8 | }
9 |
10 | .main {
11 | padding: 5rem 0;
12 | flex: 1;
13 | display: flex;
14 | flex-direction: column;
15 | justify-content: center;
16 | align-items: center;
17 | }
18 |
19 | .footer {
20 | width: 100%;
21 | height: 100px;
22 | border-top: 1px solid #eaeaea;
23 | display: flex;
24 | justify-content: center;
25 | align-items: center;
26 | }
27 |
28 | .footer img {
29 | margin-left: 0.5rem;
30 | }
31 |
32 | .footer a {
33 | display: flex;
34 | justify-content: center;
35 | align-items: center;
36 | }
37 |
38 | .title a {
39 | color: #0070f3;
40 | text-decoration: none;
41 | }
42 |
43 | .title a:hover,
44 | .title a:focus,
45 | .title a:active {
46 | text-decoration: underline;
47 | }
48 |
49 | .title {
50 | margin: 0;
51 | line-height: 1.15;
52 | font-size: 4rem;
53 | }
54 |
55 | .title,
56 | .description {
57 | text-align: center;
58 | }
59 |
60 | .description {
61 | line-height: 1.5;
62 | font-size: 1.5rem;
63 | }
64 |
65 | .code {
66 | background: #fafafa;
67 | border-radius: 5px;
68 | padding: 0.5rem;
69 | font-size: 1.1rem;
70 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
71 | Bitstream Vera Sans Mono, Courier New, monospace;
72 | }
73 |
74 | .grid {
75 | display: flex;
76 | align-items: center;
77 | justify-content: center;
78 | flex-wrap: wrap;
79 | max-width: 800px;
80 | margin-top: 3rem;
81 | }
82 |
83 | .card {
84 | margin: 1rem;
85 | flex-basis: 45%;
86 | padding: 1.5rem;
87 | text-align: left;
88 | color: inherit;
89 | text-decoration: none;
90 | border: 1px solid #eaeaea;
91 | border-radius: 10px;
92 | transition: color 0.15s ease, border-color 0.15s ease;
93 | }
94 |
95 | .card:hover,
96 | .card:focus,
97 | .card:active {
98 | color: #0070f3;
99 | border-color: #0070f3;
100 | }
101 |
102 | .card h3 {
103 | margin: 0 0 1rem 0;
104 | font-size: 1.5rem;
105 | }
106 |
107 | .card p {
108 | margin: 0;
109 | font-size: 1.25rem;
110 | line-height: 1.5;
111 | }
112 |
113 | .logo {
114 | height: 1em;
115 | }
116 |
117 | @media (max-width: 600px) {
118 | .grid {
119 | width: 100%;
120 | flex-direction: column;
121 | }
122 | }
123 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
4 |
5 |
6 | 
7 |
8 | 
9 |
10 |
11 | 
12 |
13 |
14 |
15 |
16 |
17 | A full-featured Next.js starter that includes all you need to build amazing projects 🔥. Fork and customize from [jpedroschmitz](https://github.com/jpedroschmitz/typescript-nextjs-starter)
18 |
19 | - 🚀 **Next.js 15 App Router & React 18**
20 | - ⚙️ **Tailwind CSS 3** - A utility-first CSS framework
21 | - 🍓 **Styled Components** - Styling React component
22 | - 📏 **ESLint** — Pluggable JavaScript linter
23 | - 💖 **Prettier** - Opinionated Code Formatter
24 | - 🐶 **Husky** — Use git hooks with ease
25 | - 🚫 **lint-staged** - Run linters against staged git files
26 | - 😁 **shadcn** - Beautifully designed components that you can copy and paste into your apps.
27 | - 🗂 **Absolute import** - Import folders and files using the `@` prefix
28 | - 🤩 **Vercel Serverless/Edge Functions** - Serverless/Edge functions for Next.js
29 |
30 | ## 🚀 Getting started
31 |
32 | The best way to start with this template is using `create-next-app`.
33 |
34 | ```
35 | npx create-next-app ts-next -e https://github.com/chhpt/nextjs-starter
36 | ```
37 |
38 | or
39 |
40 | ```
41 | pnpm create next-app ts-next -e https://github.com/chhpt/nextjs-starter
42 | ```
43 |
44 | If you prefer you can clone this repository and run the following commands inside the project folder:
45 |
46 | 1. `pnpm install` or `npm install`;
47 | 2. `pnpm dev`;
48 |
49 | To view the project open `http://localhost:3000`.
50 |
51 | ## 🤝 Contributing
52 |
53 | 1. Fork this repository;
54 | 2. Create your branch: `git checkout -b my-new-feature`;
55 | 3. Commit your changes: `git commit -m 'Add some feature'`;
56 | 4. Push to the branch: `git push origin my-new-feature`.
57 |
58 | **After your pull request is merged**, you can safely delete your branch.
59 |
60 | ## 📝 License
61 |
62 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for more information.
63 |
64 | ---
65 |
66 | Made with ♥ by Clare Chang
67 |
--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 |
3 | import styles from '@/styles/home.module.css'
4 |
5 | export default function Home() {
6 | return (
7 |
8 |
9 |
Create Next App
10 |
11 |
12 |
13 |
14 |
15 | Welcome to Next.js!
16 |
17 |
18 |
19 | Get started by editing
20 | {` `}
21 | src/app/page.tsx
22 |
23 |
24 | This is not an official starter!
25 |
26 |
64 |
65 |
66 |
77 |
7 |
74 | {children}
75 |