deptno / next.js-typescript-starter-kit Goto Github PK

View Code? Open in Web Editor NEW

342.0 9.0 54.0 1.16 MB

:deciduous_tree: [email protected], Styled-jsx, TypeScript, Jest, SEO

License: MIT License

JavaScript 6.76% TypeScript 91.65% CSS 1.59%

nextjs postcss cssnext redux typescript redux-thunk storybook enzyme seo bootstrap

next.js-typescript-starter-kit's Introduction

Next.js TypeScript Starter Kit

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

~~:rocket: 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

styled-jsx/css issue#2
external css, module issue#3

typescript-monorepo-next-example - Next.js version

next.js-typescript-starter-kit's People

Contributors

Stargazers

Watchers

next.js-typescript-starter-kit's Issues

How to configure proxy

How in this starter kit to setup proxy for api? Which is running on different instance and port. In original JavaScript we have this solution

But how to setup in this typescript starter kit? Any advice, example, solution?

Expected Behavior

work with typescript

npm run storybook

Current Behavior

loader error

Context

branch lab/storybook

reference directory

.storybook
stories

.babelrc may cause side effect

Please Add Support For `enzyme` And Test Coverage Report

Hi, thank you for your great work and sharing idea.

https://github.com/airbnb/enzyme
https://www.sitepen.com/blog/2015/09/29/code-coverage-for-typescript-and-other-transpiled-languages/

Thank you in advance.

replace postcss with postcss-preset-env

div inside Home.css is having a lint error

https://github.com/deptno/next.js-typescript-starter-kit/blob/master/src/components/Home.css

div {
    background: var(--colorPrimary);
    color: var(--colorSecondary);
}

div tag inside Home.css is having lint problem.
What config do I need to make the error go away.

I'm using Visual Studio Code Version 1.31.1 (1.31.1)

Thanks,

Serving sitemap.xml

Hi @deptno, thanks for creating this great project!
I wondered if you could share how to serve sitemap.xml file. Or maybe even adding this option to the starter kit. Thanks again!

Getting an error when running the test script

I downloaded the repo and ran the test script but I am running into this error.

nested styles

not working with

<style jsx>{`{
      div {
        background: yellow;

        span {
          color: blue;
        }
      }
    }`}</style>

Home.tsx: Nesting detected at 7:9. Unfortunately nesting is not supported by styled-jsx.

I dont know if css plugins are loaded.

Can you enhance styles loading with https://github.com/zeit/next-plugins/tree/master/packages/next-css ?

thx

What is paho-mqtt for?

I found this in the _document.tsx file but am unsure what it is used for?
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>

_document.tsx: .overrides is not allowed in preset options

Just clone the project
git clone https://github.com/deptno/next.js-typescript-starter-kit.git testnxj

then

cd testnxj
npm install
npm run start:dev

After all getting this issue

Module build failed: Error: [BABEL] .../testnxj/pages/_app.tsx: .overrides is not allowed in preset options
at .../testnxj/node_modules/@babel/core/lib/config/validation/options.js:64:13
at Array.forEach ()
at validate (.../testnxj/node_modules/@babel/core/lib/config/validation/options.js:62:21)
at .../testnxj/node_modules/@babel/core/lib/config/full.js:242:36
at cachedFunction (.../testnxj/node_modules/@babel/core/lib/config/caching.js:40:17)
at loadPresetDescriptor (.../testnxj/node_modules/@babel/core/lib/config/full.js:234:45)
at .../testnxj/node_modules/@babel/core/lib/config/full.js:58:19
at Array.map ()
at recurseDescriptors (.../testnxj/node_modules/@babel/core/lib/config/full.js:56:36)
at recurseDescriptors (.../testnxj/node_modules/@babel/core/lib/config/full.js:87:27)
at loadFullConfig (.../testnxj/node_modules/@babel/core/lib/config/full.js:103:6)
at .../testnxj/node_modules/@babel/core/lib/transform.js:26:33
at _combinedTickCallback (internal/process/next_tick.js:132:7)
at process._tickCallback (internal/process/next_tick.js:181:9)

Following the install steps will yield 263 vulnerabilites

After the npm install process is finished the output ends with this:
found 263 vulnerabilities (77 low, 166 moderate, 19 high, 1 critical) run 'npm audit fix' to fix them, or 'npm audit' for details

How would you do to dispatch an action in getInitialProps?

WDYT in create a HOC to makes it possible to call a dispatch in getInitialProps?

Like this one: https://github.com/zeit/next.js/blob/master/examples/with-redux/lib/with-redux-store.js

I also have tried to insert it in _app. It dispatch the action, however for some reason it doesn't update the store, could you help me?

Styles outside of components error

I cannot use

import * as css from 'styled-jsx/css'
const button = css`button { color: hotpink; }`

error:

[ts] Cannot invoke an expression whose type lacks a call signature. Type 'typeof 'styled-jsx/css'' has no compatible call signatures.

Cannot found resource file

These two file get 404 error. Where should i place these files?

storybook not working

There are multiple issues in running it. Can you once try to run it?

ts-loader is not present in package.json.
once i install it.

WARNING in ./stories/index.stories.tsx
Module build failed: Error: You may be using an old version of webpack; please check you're using at least version 4
    at successfulTypeScriptInstance (/Users/ritz078/projects/next.js-typescript-starter-kit/node_modules/ts-loader/dist/instances.js:168:15)
    at Object.getTypeScriptInstance (/Users/ritz078/projects/next.js-typescript-starter-kit/node_modules/ts-loader/dist/instances.js:51:12)
    at Object.loader (/Users/ritz078/projects/next.js-typescript-starter-kit/node_modules/ts-loader/dist/index.js:16:41)
 @ ./stories .stories.tsx$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js

Layout.tsx global style is not rendered in output <head>

The <style jsx global> block in Layout.tsx is not rendered in the output <head>.

Per the docs, it appears this needs to be a sibling of <Head> instead of a child.