nextjs ts

NextJS样板

使用NextJS启动项目的自以为是的样板

特征

• ？下一个13
• ⚛️反应18
• ？自定义文档和应用
• ⌨️在严格模式下使用打字稿键入安全性
• ？使用PostCSS + Preset-env编写SCSS和Future CSS
• ？ svg精灵图标
• ？用Eslint和Stylelint提起您的代码
• ？更漂亮的代码样式
• ？开玩笑 +测试库的测试
• ☝️沙哑 +绒毛阶段用于代码质量保证
• EditorConfig文件的一致凹痕
• ？ redux带有react-redux和redux-thunk

变异分支

自定义服务器

git clone -b custom-server --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

酶

git clone -b enzyme --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

没有REDUX

git clone -b no-redux --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

入门

在开始开发Awesome应用程序之前，您需要安装项目的依赖项。确保已安装并运行NPM节点（> = 10.13.0）：

$ npm install

⌨️发展

一旦安装了所有依赖项，您就可以开始开发。要在http：// localhost上启动开发服务器：3000运行：

$ npm run dev

？生产

要在生产中运行您的应用程序，请确保首先运行构建：

$ npm run build

然后使用提供的端口号启动您的应用程序（默认为3000，如果不提供）：

$ PORT=8080 npm run start

？静止的

您也可以将应用程序导出到静态网站：

npm run export

这将使静态html页面陷入./out

？衬里

样板提供了几个衬里，可帮助您关注代码一致性和类型安全性。有三个衬里：一个用于CSS，一个用于打字稿，一个用于类型安全。您可以使用以下命令单独使用它们：

$ npm run lint:css
$ npm run lint:ts
$ npm run lint:types

提示：为了充分利用衬里，为编辑器或IDE安装相应的（Stylelint，tslint）插件

更漂亮

Prettier可以帮助您执行一致（自以为是的）代码样式。如果可能的话，您可以告诉编辑器在保存文件时格式化您的代码。如果您无法执行此操作，则可以使用以下方式手动运行：

$ npm run prettier

？测试

您可以使用开玩笑和酶编写测试。您可以使用以下命令进行所有测试

$ npm run test

如果要遵循测试驱动的开发，则可以使用：

$ npm run test:dev

模块

打字稿

Typescript和Babel与自定义模块解析器预先配置。这意味着您默认可以使用以下模块使用自定义名称空间的绝对导入：

 /* import common library */
import lib from '@common/<folder>/<lib>'
/* import component */
import Counter from '@components/counter/Counter'
/* import container */
import HomepageCounter from '@containers/counter/HomepageCounter'
/* import store files */
import { CounterAction } from '@store/counter/counterActions'

SCSS

默认情况下，路径./src/common/css被配置为我们的SCSS加载器的随附路径。这意味着您可以直接导入该文件夹的任何文件，而无需相对或绝对路径：

 @import 'variables' ;
@import 'colors' ;