next.js typescript starter kit

Next.js TypeScript Starter Kit

انظر Changelog

ميزة

• TypeScript
• تصميم jsx
• الوحدة النمطية CSS (postcss - CSSNEXT ، متداخلة ، استيراد)
• SEO & Analytics (Google Analytics ، Facebook Pixel ، Naver Analytics )
• قصص (وحدة الدعم CSS)
• Jest & Enzyme (وحدة الدعم CSS)

تحميل من CDN

• الخط الهائل@5

تثبيت

git clone https://github.com/deptno/next.js-typescript-starter-kit my-project
cd my-project
rm -r .git
yarn

يجري

امتحان

yarn test # test
yarn test:watch
yarn test:coverage # report coverage

~~: صاروخ: قصة ~~

قصص

yarn storybook # open browser localhost:6006 

yarn build-storybook # Build storybook static assets

تطوير

yarn start:dev # run

إنتاج

يخدم

yarn
yarn build # create .next directory
yarn start # start server 

بناء HTML ثابت

yarn
yarn build # create .next directory
yarn export # create .out directory 

إعدادات

تعيين متغيرات SEO والتحليلات

SRC/الثوابت/البيئة

 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 = ''

إذا تم تقييم كل متغير خطأ ، فإنه لا يحمل مكتبة ذات صلة

الاستخدام

وحدة CSS (SRC/مكونات/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 ) } >

تصميم jsx

النطاق العالمي (SRC/Components/Layout.tsx)

 const Layout = props =>
  < head >
    < style jsx global > { `
      div > * {
        font-size: 32px;
      }
    ` }
    < / style >
  < / head > 

النطاق المحلي (SRC/مكونات/home.tsx)

 export const Home = props =>
  < div >
    < style jsx > { `{
      color: darkred;
    }` } < / style >
    home
  < / div>

آحرون

• styled-JSX/CSS العدد رقم 2
• CSS الخارجي ، عدد الوحدة رقم 3

متعلق ب

• TypeScript-Monorepo-next-example-إصدار Next.js