Start with sample
- apply next@6.1
- remove bootstrap cdn
- more examples
- ssr
- module css
- style jsx
- next.js way
- custom _page.tsx => _app.tsx,
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)
- next@6.1
- react@16.4
- redux-thunk
- react-ga
- redux-persist@4
- bootstrap@4
- font-awesome@5
git clone https://github.com/deptno/next.js-typescript-starter-kit my-project
cd my-project
rm -r .git
npm installnpm run test # test
npm run test:watch
npm run test:coverage # report coveragenpm run storybook # open browser localhost:6006npm run build-storybook # Build storybook static assetsnpm run start:dev # runnpm install
npm run build # create .next directory
npm start # start servernpm install
npm run build # create .next directory
npm run export # create .out directorySet 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>