Next.js TypeScript Starter Kit CircleCI
see ChangeLog
- 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)
- font-awesome@5
git clone https://github.com/deptno/next.js-typescript-starter-kit my-project
cd my-project
rm -r .git
yarnyarn test # test yarn test:watch yarn test:coverage # report coverage
~~:rocket: StoryBook~~
yarn storybook # open browser localhost:6006yarn build-storybook # Build storybook static assetsyarn start:dev # runyarn yarn build # create .next directory yarn start # start server
yarn yarn build # create .next directory yarn export # create .out directory
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
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)}>
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>
- typescript-monorepo-next-example - Next.js version