The Wayback Machine - https://web.archive.org/web/20230724165048/https://github.com/deptno/next.js-typescript-starter-kit
Skip to content
This repository has been archived by the owner on Aug 27, 2020. It is now read-only.

deptno/next.js-typescript-starter-kit

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Next.js TypeScript Starter Kit CircleCI

samples

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