Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/deptno/next.js-typescript-starter-kit
:deciduous_tree: [email protected], Styled-jsx, TypeScript, Jest, SEO
https://github.com/deptno/next.js-typescript-starter-kit
bootstrap cssnext enzyme facebookpixel font-awesome google-analytics nextjs postcss redux redux-thunk seo storybook typescript
Last synced: 3 months ago
JSON representation
:deciduous_tree: [email protected], Styled-jsx, TypeScript, Jest, SEO
- Host: GitHub
- URL: https://github.com/deptno/next.js-typescript-starter-kit
- Owner: deptno
- License: mit
- Archived: true
- Created: 2017-06-13T07:07:55.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-24T19:36:42.000Z (over 5 years ago)
- Last Synced: 2024-09-19T01:52:45.003Z (3 months ago)
- Topics: bootstrap, cssnext, enzyme, facebookpixel, font-awesome, google-analytics, nextjs, postcss, redux, redux-thunk, seo, storybook, typescript
- Language: TypeScript
- Homepage:
- Size: 1.13 MB
- Stars: 338
- Watchers: 9
- Forks: 54
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-nextjs - NextJS TypeScript Starter Kit - :tada: TypeScript + NextJS, Styled-jsx, Redux, PostCSS, configurable SEO (Boilerplates)
- fucking-awesome-nextjs - NextJS TypeScript Starter Kit - :tada: TypeScript + NextJS, Styled-jsx, Redux, PostCSS, configurable SEO (Boilerplates)
README
# Next.js TypeScript Starter Kit [](https://circleci.com/gh/deptno/next.js-typescript-starter-kit)
> see **[ChangeLog](CHANGELOG.md)**
## 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
```sh
git clone https://github.com/deptno/next.js-typescript-starter-kit my-project
cd my-project
rm -r .git
yarn
```
## Run :rocket:
#### :rocket: Test
```bash
yarn test # test
yarn test:watch
yarn test:coverage # report coverage
```
~~:rocket: StoryBook~~
#### :rocket: StoryBook
```bash
yarn storybook # open browser localhost:6006
```
```bash
yarn build-storybook # Build storybook static assets
```
### :rocket: Development
```bash
yarn start:dev # run
```
### :rocket: Production
#### Serve
```bash
yarn
yarn build # create .next directory
yarn start # start server
```
#### Build static HTML
```bash
yarn
yarn build # create .next directory
yarn export # create .out directory
```
## Configuration
Set SEO & analytics variables
> src/constants/env.ts
```typescript
export const GA_TRACKING_ID = ''
export const FB_TRACKING_ID = ''
export const SENTRY_TRACKING_ID = ''
// for meta tag
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](src/components/Home.tsx))
```typescript jsx
import * as classnames from 'classnames'
import * as css from './Home.css'
export const Just = props =>
export const Mixed = props =>
```
### Styled-jsx
#### Global scope ([src/components/Layout.tsx](src/components/Layout.tsx))
```typescript jsx
const Layout = props =>
{`
div > * {
font-size: 32px;
}
`}
```
#### Local scope ([src/components/Home.tsx](src/components/Home.tsx))
```typescript jsx
export const Home = props =>
{`{
color: darkred;
}`}
home
```
#### Others
- styled-jsx/css [issue#2](https://github.com/deptno/next.js-typescript-starter-kit/issues/2)
- external css, module [issue#3](https://github.com/deptno/next.js-typescript-starter-kit/issues/3)
### Related
- [typescript-monorepo-next-example](https://github.com/deptno/typescript-monorepo-next-example) - Next.js version