r0b- / project-template-next-ts

Project template created with create-next-app (next.js) and TypeScript/TSLint, Jest/Enzyme & styled-components

About

Project boilerplate build with create-next-app and some additional packages to get you started with:

• next.js - React16 + SSR + HMR + Prefetching + Code Splitting
  • The project includes a basic app structure with head, navigation and footer components that are wrapped by a layout component that can be included on each page.
• TypeScript - Typed superset for JavaScript
• TSLint - Linter for TypeScript
• styled-components - Component based styling with TypeScript support
• Jest + Enzyme - React testing (unit, snapshot, mocking,...) with TypeScript support. Thanks to ts-jest

Setup

1. Install yarn: npm i -g yarn
2. git clone https://github.com/r0b-/project-template-next-ts.git
3. cd project-template-next-ts
4. Install dependencies: yarn
5. Optional for WebStorm/PHPStorm:
   
   • Install or activate plugins: 'tslint', 'styled-components', 'TypeScript spec file generator / navigator'.
   • To use the integrated test runner add a 'Jest' run configuration. For continuous running tests add --watch to 'Jest options'.
   • To use the integrated code analysis enable TSLint under 'Languages & Frameworks > TypeScript > TSLint'.

Available Scripts

• yarn dev
  Runs the app in the development mode (with file watcher). Open http://localhost:3000 to view it in the browser.

• yarn test
  Runs tests.

• yarn build
  Builds the app for production to the .next folder. It correctly bundles React in production mode and optimizes the build for the best performance.

• yarn start
  Starts the application in production mode. The application should be compiled with `yarn build` first. See the section in Next docs about deployment for more information.