/next.js-typescript-starter-kit

:deciduous_tree: Next@6, Styled-jsx, TypeScript, Storybook, Jest, SEO

Primary LanguageTypeScriptMIT LicenseMIT

next.js-typescript-starter-kit CircleCI

next.js integrated with typescript

feature

support

  • 🎉 typescript integrated
  • storybook support(storybook doesn't share webpack config with next.js)
  • styled-jsx
  • SEO & analytics(Google Analytics, Facebook Pixel, Naver Analytics)
  • jest, enzyme

integration

  • next@6
  • react@16
  • redux-thunk
  • react-ga
  • redux-persist@4

using cdn

  • bootstrap@4.0.0-beta.2
  • font-awesome@4.7

installation

git clone https://github.com/deptno/next.js-typescript-starter-kit

setup

set SEO & analytics variables

src/constants/env.ts

export const DEV = process.env.NODE_ENV !== 'production'

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

styled-jsx

global scope

src/components/Layout.tsx

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

local scope

src/components/Home.tsx

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

others

changelog