NextJSを使用してプロジェクトをキックスタートする意見のあるボイラープレート
特徴
react-reduxとredux-thunk使用したRedux git clone -b custom-server --single-branch [email protected]:sanjaytwisk/nextjs-ts.gitgit clone -b enzyme --single-branch [email protected]:sanjaytwisk/nextjs-ts.gitgit clone -b no-redux --single-branch [email protected]:sanjaytwisk/nextjs-ts.git素晴らしいアプリケーションの開発を開始する前に、プロジェクトの依存関係をインストールする必要があります。ノード(> = 10.13.0)とNPMがインストールされて実行されていることを確認してください。
$ npm installすべての依存関係がインストールされたら、開発を開始できます。 http:// localhostで開発サーバーを起動するには:3000 Run:
$ npm run devプロダクションでアプリケーションを実行するには、最初にビルドを実行してください。
$ npm run buildそして、提供されたポート番号でアプリケーションを開始します(提供されていない場合はデフォルトは3000になります):
$ PORT=8080 npm run startあなたはあなたのアプリケーションを静的なウェブサイトにエクスポートすることもできます:
npm run exportこれにより、静的HTMLページが./outになります
ボイラープレートは、コードの一貫性とタイプの安全性に注意するのに役立ついくつかのリナーを提供します。 CSS用の1つ、TypeScript用、もう1つはType Safety用の3つのリナーがあります。次のコマンドを使用して、それぞれを個別に使用できます。
$ npm run lint:css
$ npm run lint:ts
$ npm run lint:typesヒント:リントを最大限に活用するには、編集者またはIDE用の対応する(Stylelint、TSLint)プラグインをインストールするには
きれい
きれいなのは、一貫した(意見のある)コードスタイルを実施するのに役立ちます。可能であれば、ファイルを保存するときにコードをフォーマットするように編集者に指示できます。これができない場合は、次のことを手動で実行できます。
$ npm run prettierJestとEnzymeを使用してテストを作成できます。次のコマンドですべてのテストを実行できます
$ npm run testテスト駆動型開発をフォローしたい場合は、使用できます。
$ npm run test:devTypeScriptと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'デフォルトでは、PATH ./src/common/cssは、SCSSローダーの含まれるパスとして構成されています。これは、相対パスまたは絶対パスなしでこのフォルダーのファイルを直接インポートできることを意味します。
@import 'variables' ;
@import 'colors' ;