Next.js + Tailwind CSS + TypeScript 入门模板
搭建一个新项目并连接所有组件需要花费大量时间。因此，我决定创建一个包含我最喜欢的技术栈的入门模板，方便用户使用。
theodorusclarence / ts-nextjs-tailwind-starter
🔋 Next.js + Tailwind CSS + TypeScript 入门模板和样板代码，包含丰富的实用开发功能
里面有什么
1. 已安装的软件包
- clsx，用于
className有条件地构造字符串的实用程序。 - react-icons，热门图标包的 svg react 图标。
2. UnstyledLink 组件
用作 Next.js Link 组件。如果 href 以 `<link>`/或`</link>` 开头，则渲染 Next/Link 链接；#否则，渲染一个a带有 `<link>` 的标签target='_blank'。此外，还为外部链接添加了光标样式。
我发现使用此组件可以简化 Next.js Link 的样板代码，该组件使用Link<link>a标签。
// src/components/UnstyledLink.tsx
import clsx from 'clsx';
import Link, { LinkProps } from 'next/link';
export type UnstyledLinkProps = {
href: string;
children: React.ReactNode;
openNewTab?: boolean;
className?: string;
} & React.ComponentPropsWithoutRef<'a'> &
LinkProps;
export default function UnstyledLink({
children,
href,
openNewTab,
className,
...rest
}: UnstyledLinkProps) {
const isNewTab =
openNewTab !== undefined
? openNewTab
: href && !href.startsWith('/') && !href.startsWith('#');
if (!isNewTab) {
return (
<Link href={href}>
<a {...rest} className={className}>
{children}
</a>
</Link>
);
}
return (
<a
target='_blank'
rel='noopener noreferrer'
href={href}
{...rest}
className={clsx(className, 'cursor-[ne-resize]')}
>
{children}
</a>
);
}
3. 自定义链接组件
使用 UnstyledLink 组件，我们可以将其扩展为一个带有所有默认样式的新组件。以下是我为了方便使用而预先集成到初始组件中的一些样式。
4. 绝对进口
我喜欢Vue 风格的绝对导入，所以我也在 tsconfig.json 中添加了配置，这样我们就可以像这样导入了。
import Nav from '../../../components/Nav';
simplified to
import Nav from '@/components/Nav';
5. SEO组件
在 . 中配置默认值src/components/Seo.tsx。如果您想使用默认值，只需将其添加<Seo />到页面顶部即可。
您还可以通过将标题和描述作为属性进行覆盖，来对每个页面进行自定义。
<Seo
title='Next.js Tailwind Starter'
description='your description'
/>
或者，如果您仍然想保留标题%s | Next.js Tailwind Starter，可以使用templateTitleprops。
这是我使用的SEO组件，你只需更改默认设置即可。
// src/components/Seo.tsx
import Head from 'next/head';
import { useRouter } from 'next/router';
const defaultMeta = {
title: 'Next.js Tailwind Starter',
site_name: 'Next.js Tailwind Starter',
description: 'A template for Next.js and Tailwindcss by Theodorus Clarence',
url: 'https://theodorusclarence.com',
image: 'https://theodorusclarence.com/favicon/large-og.jpg',
type: 'website',
robots: 'follow, index',
};
type SeoProps = {
date?: string;
templateTitle?: string;
} & Partial<typeof defaultMeta>;
export default function Seo(props: SeoProps) {
const router = useRouter();
const meta = {
...defaultMeta,
...props,
};
meta['title'] = props.templateTitle
? `${props.templateTitle} | ${meta.site_name}`
: meta.title;
return (
<Head>
<title>{meta.title}</title>
<meta name='robots' content={meta.robots} />
<meta content={meta.description} name='description' />
<meta property='og:url' content={`${meta.url}${router.asPath}`} />
<link rel='canonical' href={`${meta.url}${router.asPath}`} />
{/* Open Graph */}
<meta property='og:type' content={meta.type} />
<meta property='og:site_name' content={meta.site_name} />
<meta property='og:description' content={meta.description} />
<meta property='og:title' content={meta.title} />
<meta name='image' property='og:image' content={meta.image} />
{/* Twitter */}
<meta name='twitter:card' content='summary_large_image' />
<meta name='twitter:site' content='@th_clarence' />
<meta name='twitter:title' content={meta.title} />
<meta name='twitter:description' content={meta.description} />
<meta name='twitter:image' content={meta.image} />
{meta.date && (
<>
<meta property='article:published_time' content={meta.date} />
<meta
name='publish_date'
property='og:publish_date'
content={meta.date}
/>
<meta
name='author'
property='article:author'
content='Theodorus Clarence'
/>
</>
)}
</Head>
);
}
6. 自定义 404 页面
Next.js 默认的 404 页面非常简单，所以我添加了一些基本样式和一些闪烁动画。
7. 工作区代码片段
包含 React Import、useState、useEffect、React Component 和 Next.js Pages 等代码片段，以及 SEO 导入功能。查看更多
8. Husky、Prettier、Lint 和 Commitlint 已配置
我安装了3个Husky挂钩，包括：
- 提交前，运行 ESLint 并使用 Prettier 格式化代码。
- commit-msg，运行 commitlint 以确保提交消息使用常规提交规范。
- 合并后，
yarn每次git pull合并后运行此命令，以确保所有新软件包都已安装并准备就绪。
9. 默认网站图标声明
使用网站图标生成器，然后覆盖以下文件：/public/favicon
10. 默认 Tailwind CSS 基础样式
响应式标题尺寸有默认样式，并且.layout支持在大屏幕尺寸下设置最大宽度。更多详情请参阅我的博客文章。
11. 预加载和自托管的 Inter Fonts
Inter 是一个可变字体，它是自托管的，并且已在此启动器中预加载。
theodorusclarence / ts-nextjs-tailwind-starter
🔋 Next.js + Tailwind CSS + TypeScript 入门模板和样板代码，包含丰富的实用开发功能
欢迎到 GitHub 查看！如果您想贡献代码，请提交 PR！如果您发现任何可以改进的地方，也请告诉我。
非常感谢您的点赞 ⭐！