几个月前,我发布了我的免费和开源 Next JS 入门模板,并将其用于我自己的项目。最近,Next JS 团队发布了一个新版本,Next JS 11。所以,我有机会将我的入门代码更新到最新版本,不仅是 Next JS,还包括所有依赖项。

在过去的几个月里,我几乎每天都在使用它,我学到了很多关于什么有效,什么无效。因此,我将所有这些学习内容都包含在了这个新版本的入门模板中,并分享给了社区。

以下是开箱即用的所有内容:

• 🔥 下一个 JS 11

• 🎨 带有 JIT 的 Tailwind CSS

• ❤️ 反应 11

• 🎉 打字稿

• 🌇 React 和 TypeScript 的严格模式

• ✏️ ESLint 默认 Next 配置、Next Core Web Vitals 和 Airbnb 配置

• 🛠 更漂亮

• 🦊 哈士奇和皮棉分阶段

• ✨ PostCSS,兼容 styled-jsx

• 🤖 使用 Next-seo 进行 SEO

• 🗂 带有客户端和服务端的扩展、设置和调试的 VSCode。

• 🌈 默认主题

• ⚙️ 捆绑分析器

• 🖱️ 一键部署到 Vercel/Netlify(或者,您可以手动部署到任何托管服务)

你可以预览a Next JS starter 模板现场演示或者你可以在 GitHub 上找到代码:

ixartz/Next-js-Boilerplate

🚀 Next.js 11+、Tailwind CSS 2.0 和 TypeScript 的样板和启动器 ⚡️ 以开发人员经验为先:Next.js + TypeScript + ESLint + Prettier + Husky + Lint-Staged + VSCode + Netlify + PostCSS + Tailwind CSS

Next JS 11+、Tailwind CSS 2.0 和 TypeScript的样板和启动器

🚀 Next.js、Tailwind CSS 和 TypeScript 的样板和 Starter ⚡️ 优先考虑开发人员经验:Next.js、TypeScript、ESLint、Prettier、Husky、Lint-Staged、VSCode、Netlify、PostCSS、Tailwind CSS。

克隆这个项目并用它来创建你自己的Next.js项目。您可以查看Next js 模板演示。

特点

开发者体验优先:

• 🔥Next.js用于静态站点生成器

• 🎨 与Tailwind CSS 集成

• 💅 PostCSS 用于处理 Tailwind CSS

• 🎉 类型检查TypeScript

• ✏️ Linter 与ESLint

• 🛠 Code Formatter withPrettier

• 🦊 用于 Git Hooks 的 Husky

• 🚫 Lint-staged 用于在 Git 暂存文件上运行 linters

• 🗂 VSCode 配置:PostCSS、ESLint、Prettier、TypeScript 的调试、设置、任务和扩展

• 🤖 SEO 元数据、JSON-LD 和带有 Next SEO 的 Open Graph 标签

• ⚙️捆绑器分析仪

• 🖱️ Vercel 或 Netlify 一键部署

• 🌈 包括一个免费的简约主题

• 💯...

在 GitHub 上查看

其他 Next JS 模板和主题

使用组件和 UI 块以现代方式构建。你也可以在我的Premium Next JS Theme查看我的作品集:

Premium Nextjs 登陆页面模板

Indigo Nextjs 模板

紫色Nextjs模板

蓝色登陆页面 Nextjs 模板

通过节省开发和设计时间,您可以根据需要轻松自定义主题。