🌳 Next@7, Styled-jsx, TypeScript, Jest, SEO
Switch branches/tags
Clone or download
Latest commit 6896b0f Nov 1, 2018

README.md

Next.js TypeScript Starter Kit CircleCI

samples

Start with sample

Latest update

  • REMOVED storybook (conflict with TypeScript, Next), you can use via old version v6.0.1
  • typescript@3.1.5, next@7.0.2, react@16.6
  • applied postcss-preset-env
  • add favicon.ico

see ChangeLog

Feature

  • TypeScript
  • Styled-jsx
  • Module css (PostCSS - cssnext, nested, import)
  • SEO & analytics(Google Analytics, Facebook Pixel, Naver Analytics)
  • Storybook (support module css)
  • Jest & Enzyme (support module css)

Load from CDN

  • font-awesome@5

Installation

git clone https://github.com/deptno/next.js-typescript-starter-kit my-project
cd my-project
rm -r .git
yarn

Run πŸš€

πŸš€ Test

yarn test # test
yarn test:watch
yarn test:coverage # report coverage
~~πŸš€ StoryBook~~

πŸš€ StoryBook

yarn storybook # open browser localhost:6006
yarn build-storybook # Build storybook static assets

πŸš€ Development

yarn start:dev # run

πŸš€ Production

Serve

yarn
yarn build # create .next directory
yarn start # start server

Build static HTML

yarn
yarn build # create .next directory
yarn export # create .out directory

Configuration

Set SEO & analytics variables

src/constants/env.ts

export const GA_TRACKING_ID = ''
export const FB_TRACKING_ID = ''
export const SENTRY_TRACKING_ID = ''

// for meta tag <og & twitter>
export const SITE_NAME = ''
export const SITE_TITLE = ''
export const SITE_DESCRIPTION = ''
export const SITE_IMAGE = ''

If each variable evaluated false, it does not load related library

Usage

Module CSS (src/components/Home.tsx)

import * as classnames from 'classnames'
import * as css from './Home.css'

export const Just = props => <div className={css.className}>
export const Mixed = props => <div className={classnames('row', 'home', css.home)}>

Styled-jsx

Global scope (src/components/Layout.tsx)

const Layout = props =>
  <head>
    <style jsx global>{`
      div > * {
        font-size: 32px;
      }
    `}
    </style>
  </head>

Local scope (src/components/Home.tsx)

export const Home = props =>
  <div>
    <style jsx>{`{
      color: darkred;
    }`}</style>
    home
  </div>

Others

Related