All Projects â†’ deptno â†’ Next.js Typescript Starter Kit

deptno / Next.js Typescript Starter Kit

Licence: mit
🌳 [email protected], Styled-jsx, TypeScript, Jest, SEO

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Next.js Typescript Starter Kit

personal-blog
✍️ 个人技术博客
Stars: ✭ 79 (-76.9%)
Mutual labels:  enzyme, nextjs, storybook
Stackoverflow Clone
This project is a simplified a full stack clone of Stackoverflow.
Stars: ✭ 395 (+15.5%)
Mutual labels:  nextjs, postcss, storybook
astraea
TypeScript + React Boilerplate
Stars: ✭ 15 (-95.61%)
Mutual labels:  enzyme, storybook
vue-seo-friendly-spa-template
Vue.js PWA/SPA template initially scaffolded with vue-cli and configured for SEO. Makes use of prerendering and other techniques/packages in order to achieve a perfect "Lighthouse Score".
Stars: ✭ 41 (-88.01%)
Mutual labels:  google-analytics, seo
svelte-google-analytics
Google Analytics component for Svelte
Stars: ✭ 41 (-88.01%)
Mutual labels:  google-analytics, seo
nextsss
Next.js static site starter including full setup for TypeScript, Tailwind CSS, Google Analytics, Next SEO, etc.
Stars: ✭ 80 (-76.61%)
Mutual labels:  postcss, google-analytics
JayantGoel001.github.io
My Personal Portfolio.
Stars: ✭ 31 (-90.94%)
Mutual labels:  seo, font-awesome
nuxt-netlify-lambda-starter
🛠️ SEO-friendly website starter backed by Netlify lambda functions in a simple, friendly repo
Stars: ✭ 60 (-82.46%)
Mutual labels:  seo, font-awesome
Slopeninja Frontend
Slope Ninja Frontend 🏂❄️⛄️
Stars: ✭ 39 (-88.6%)
Mutual labels:  redux-thunk, google-analytics
expansion-pack
🔋 Useful stack expansion for ts-nextjs-tailwind-starter
Stars: ✭ 16 (-95.32%)
Mutual labels:  nextjs, storybook
react-enterprise-starter-kit
Highly Scalable Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase. 🔥
Stars: ✭ 55 (-83.92%)
Mutual labels:  postcss, storybook
react-seo-friendly-spa-template
React PWA/SPA template initially scaffolded with CRA (Create React App) and configured for SEO. Makes use of prerendering and other techniques/packages in order to achieve a perfect "Lighthouse Score".
Stars: ✭ 24 (-92.98%)
Mutual labels:  google-analytics, seo
sveltekit-starter
Sveltekit starter project created with sveltekit, typescript, tailwindcss, postcss, husky, and storybook. The project has the structure set up for the scaleable web application.
Stars: ✭ 482 (+40.94%)
Mutual labels:  postcss, storybook
react-module-boilerplate
Sample React presentational components package.
Stars: ✭ 16 (-95.32%)
Mutual labels:  enzyme, storybook
twitter-web-react
twitter-web-react.now.sh
Stars: ✭ 104 (-69.59%)
Mutual labels:  postcss, storybook
Pwa Boilerplate
✨ PWA Boilerplate is highly scalable and is designed to help you kick-start your next project 🔭.
Stars: ✭ 82 (-76.02%)
Mutual labels:  redux-thunk, nextjs
react-ecommerce
E-commerce monorepo application using NextJs, React, React-native, Design-System and Graphql with Typescript
Stars: ✭ 136 (-60.23%)
Mutual labels:  enzyme, storybook
Next Ga
Next.js HOC to integrate Google Analytics on every page change
Stars: ✭ 228 (-33.33%)
Mutual labels:  nextjs, google-analytics
Next Seo
Next SEO is a plug in that makes managing your SEO easier in Next.js projects.
Stars: ✭ 4,149 (+1113.16%)
Mutual labels:  nextjs, seo
Front End
Operation Code's website
Stars: ✭ 301 (-11.99%)
Mutual labels:  postcss, storybook

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

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].