typescript nextjs starter

Next.js的未开放的打字稿启动器

具有最佳DX的高度可扩展基础。您需要建立下一个项目所需的所有工具。

_{由JoãoPedro在许多出色贡献者的帮助下创建。}

特征

• ⚡️ANCEN.JS15（应用程序路由器）
• ⚛️反应19
• ⛑打字稿
• ？ ESLINT 9 - 在您的代码中找到并解决问题
• ？更漂亮 - 一致样式的代码格式
• ？沙哑 - 在进行脚本之前运行脚本
• ？提交 - 确保您的提交消息遵循公约
• ？翻新 - 保持依赖关系的最新
• 绒毛阶段 - 在上演的git文件上运行Eslint和Prettier
• ？ PR工作流程 - 在拉请请求上运行类型检查和衬里
• EditorConfig-编辑和IDE的一致编码样式
• ？路径映射 - 使用@前缀导入组件或图像
• ？ CSP - 增强安全性的内容安全策略（默认最小策略）
• ？ T3 Env-类型安全环境变量
• ？重定向 - 轻松将重定向添加到您的应用程序

快速开始

从此模板开始的最佳方法是使用Create Next应用程序。

 # pnpm
pnpm create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# yarn
yarn create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# npm
npx create-next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter

发展

要在本地启动该项目，请运行：

pnpm dev

打开http://localhost:3000使用浏览器查看结果。

推荐

“该起动器是迄今为止Next的最佳打字稿入门者。
- Arafat Zahan

“我真的可以推荐下一个。JS打字稿入门仓库，作为您未来下一步的坚实基础。JS项目。”
- 科菲茨

“出色的工作！”
- Soham Dasgupta

展示柜

从Next.js打字稿入门开始的网站列表：

• freeinvoice.dev
• 概念化身制造商
• 宜家低价
• hygraph.com
• Rocketseat.com.br
• vagaschapeco.com
• fufork.vercel.app
• cryptools.dev
• 添加你的

文档

要求

• node.js> = 20
• PNPM 9

目录结构

• .github - GitHub配置，包括CI工作流程。
  
• .husky - 沙哑的配置和钩子。
  
• public - 静态资产，例如Robots.txt，Images和Favicon。
  
• src - 应用程序源代码，包括页面，组件，样式。

脚本

• pnpm dev - 在http://localhost:3000处以开发模式启动应用程序。
• pnpm build - 为您的应用程序创建优化的生产构建。
• pnpm start - 以生产模式启动应用程序。
• pnpm type-check - 使用打字稿编译器验证代码。
• pnpm lint - 为src目录中的所有文件运行ESLINT。
• pnpm lint:fix运行src目录中所有文件的ESLINT修复。
• pnpm format - 用于src目录中所有文件的更漂亮。
• pnpm format:check - 检查需要格式格式的文件清单。
• pnpm format:ci - 更漂亮的CI检查。

路径映射

TypeScript与自定义路径映射预先配置。要导入组件或文件，请使用@前缀。

 import { Button } from '@/components/Button' ;
// To import images or other files from the public folder
import avatar from '@/public/avatar.png' ;

切换到纱线/NPM

默认情况下，此启动器使用PNPM，但此选择是您的。如果您想切换到YARN/NPM，请删除pnpm-lock.yaml文件，使用YARN/NPM安装依赖项，更改CI工作流，然后使用Husky Git Hooks使用YARN/NPM命令。

注意：如果使用纱线，请确保从沙哑的文档中遵循以下步骤，以便windows上的纱线不会失败。

环境变量

我们使用T3 Env来管理环境变量。在项目的根部创建.env.local文件，并在此处添加您的环境变量。

添加其他环境变量时， ./src/lib/env/server.ts相应./src/lib/env/client.ts更新。

重定向

要添加重定向，请在./redirects.ts中更新redirects数组。它是输入的，因此您将获得属性的自动完成。

CSP（内容安全策略）

内容安全策略（CSP）是一个安全层，有助于检测和减轻某些类型的攻击，包括跨站点脚本（XSS）和数据注入攻击。 CSP在next.config.ts文件中实现。

它包含一个默认和最小策略，您可以自定义以满足您的应用程序需求。这是一个基础。

执照

该项目已根据MIT许可证获得许可 - 有关更多信息，请参见许可证文件。