Opinionated starter kit for the Next.js React framework. This starter kit includes all my go-to tech for new projects.
- Next.js
- React
- TypeScript
- next-css
- next-sass
- dotenv
- ESLint
- Prettier
- Stylelint
- Husky
- Lint Staged
- Jest
- React Testing Library
This version has cool things like Apollo GraphQL and Redux, however I removed them for Version 2 because it is hard to keep up with Apollo and I'm using Redux less and less. It still has some goodies though, especially setting up the providers in _app and testing scripts.
$ git clone git@github.com:unkleho/next-starter-kit
$ rm -rf .git
$ npm install
$ npm start
# .env
PORT=XXXX
TEST=it works!
GOOGLE_ANALYTICS_ID=UA-XXXXXXXX-X
FB_APP_ID=XXXXXXXXX
# .env.production
PORT=XXX
TEST=it works on production!
GOOGLE_ANALYTICS_ID=UA-XXXXXXXX-X
Certain features are accessible via branches:
graphql
: Use Apollo graphql (TODO)
# Set up
$ git remote add upstream git@github.com:unkleho/next-starter-kit.git
# Merging upstream
$ git fetch upstream
$ git merge upstream/master --allow-unrelated-histories
# Fix merge conflicts
$ git add .
$ git commit -am "Upstream merge"
$ git push
Super simple way to build a Universal React application. Takes care of webpack
config for you, with an optional plugin system. Routing and <head>
tags are bundled in.
GraphQL moves complexity from the client to the server. This makes frontend apps simpler and more fun to build. Any complexity that is moved to a GraphQL server can then be shared across other apps.
I find Apollo's tools are the most mature and up-to-date. It can be a bit tricky to set up, check out lib/initApollo
and lib/withApolloClient
.
Lets you NOT commit passwords or keys to your repo. Also makes switching environments easier. See the ENV Variables section above.
Next CSS lets you import CSS into a Next.js project. Call me old fashioned, but still like working with actual CSS files.
I'm a big believer of test driven development for backend applications. It is a bit trickier for frontend, however, Jest is well set up in this repo with example component and integration tests that work with Redux and Apollo.
Excellent library that tests the DOM, rather than implementation, leading to tests that simulate real world usage.
Stops developers from arguing. I'm coding way faster with Prettier. These are good things.
You gotta lint code. I'm using a Create React App's sane rules, along with a few others.
CSS is code. You still gotta lint.
Along with husky
, Lint Staged lets you run commands before committing code. Husky sets the pre-commit stuff, Lint Staged gives more options.
Using now
:
# Configuration in now.json
$ now
$ now alias my-website-XXXXXXX.now.sh my-website.com