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' ;