/next.js-typescript-starter-kit

next.js@5, styled-jsx, typescript

Primary LanguageTypeScriptMIT LicenseMIT

next.js-typescript-starter-kit

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)

integration

  • next@5
  • 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 NA_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

5.0.2

  • add storybook

5.0.1

  • name change
    • next.js-typescript-boilerplate -> next.js-typescript-starter-kit

5.0.0

  • package.json scripts

    • add export, to export static assets(MUST run after npm run build)
    • remove ts:compile script (no more need to run tsc)

  • apply new packages

    • @next/next-typescript

  • update packages

    • next@5.0.0
    • react@16.2
    • react-dom@16.2
    • typescript@2.7.1

4.1.4

  • update packages
    • next@4.1.4
    • react@16.1
    • react-dom@16.1
    • typescript@2.6.1
  • update packages client load
    • bootstrap@4.0.0-beta.2
  • version align with next

env

development

installation

npm install
npm run dev # run

production

npm install
npm run build # create .next directory
npm start # start server

or

npm install
npm run build # create .next directory
npm run export # create .out directory

license

MIT