Next.js Starter Kit

Up and running with ZEIT's Next.js framework for server-rendered React apps, Tachyons CSS framework, ESlint and JavaScript Standard Style, Jest and Microsoft Visual Studio Code.

Contents

• react, react-dom: Facebook's JavaScript UI library
• next: ZEIT's framework for server-rendered React apps
• Tachyons: atomic CSS components framework
• eslint: Pluggable linting utility for JavaScript and JSX
• eslint-config-standard-react: ESLint config for React/JSX support in JavaScript Standard Style
• flow: Facebook's static type checker for JavaScript
• jest: Facebook's JavaScript code testing platform
• classnames: Jed Watson's JavaScript utility for conditionally joining class names together

Installation

1. Get the latest version:

$ git clone -o nextjs-starter-kit -b master --single-branch \
      https://github.com/ajaykurien/nextjs-starter-kit.git MyNextApp
$ cd MyNextApp

2. Install the project dependencies and the developer tools specified in package.json

$ npm install

3. Start Next.js' dev server at http://localhost:3000

$ npm run dev

4. Follow the documentation at ZEIT/Next.js to add pages, static files, JavaScript modules and React components to build your universal app or static site.
   • Create next.config.js file and customise Next.js' behaviour.
   • Create now.json and configure the app's deployment on now

---

Tools, plugins, set-up and commands...

(Information only: the following is an aide de memoire for me; please follow the Installation instructions above)

Tool setup

• Microsoft Visual Studio Code, plus plugins:
  • Auto Close Tag automatically adds closing HTML & XML tags.
  • Auto Rename Tag automatically renames pairs of HTML & XML tags.
  • npm support for VS Code validates installed npm modules against the dependencies specified in package.json.
  • npm Intellisense autocompletes names of npm modules in import statements.
  • Debugger for Chrome debug JavaScript code running in Google Chrome from inside VS Code.
  • ESLint integrates ESLint into VS Code
  • ES7 React/Redux/React-Native/JS snippets snippets in ES7 for Javascript and React/Redux, with babel-plugin features.
  • Flow Language Support adds Flow support.
  • Document This automatically generates detailed JSDoc comments for both TypeScript and JavaScript files.
  • exports autocomplete collects ES6 exports from your project and autocompletes them.

Set up working directory and git repo:

$ mkdir MyNextJSApp && cd $_
$ git init
$ touch .gitignore
$ git add *
$ git commit -m "Initialised repo."

Initialise a new project:

$ npm init

Install production libraries:

$ npm install next react react-dom classnames

Add flow...

$ npm install -D flow-bin eslint-plugin-flowtype
$ flow init

plus Flow type annotations for Zeit/Next.js:

$ mkdir types
$ curl "https://raw.githubusercontent.com/zeit/next.js/master/examples/with-flow/types/next.js.flow" > types/next.js.flow

Add some entries to .flowconfig...

[libs]
types/

and in .babelrc:

{
  "presets": ["next/babel"],
  "plugins": ["transform-flow-strip-types"]
}

Install and configure linters:

$ npm install -D eslint babel-eslint babel-plugin-transform-flow-strip-types eslint-config-standard eslint-config-standard-react eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-react

Configure the newly-created eslintrc.js:

module.exports = {
  extends: ['standard', 'standard-react'],
  parser: 'babel-eslint',
  plugins: ['react', 'flow'],
  rules: {
    'jsx-quotes': ['error', 'prefer-double'] // follow Facebook's convention for double quotes in JSX attributes.
  }
}

Install and configure Jest test framework:

$ npm install -D jest

Set up Zeit/Next.js (instructions):

• Create folders for pages (required), static files, site-wide utilities, and React components:

$ mkdir pages static lib components config
$ touch pages/.gitkeep static/.gitkeep lib/.gitkeep components/.gitkeep config/.gitkeep

• Create the main entry point and a custom wrapper for common page elements:

$ touch pages/index.js pages/_document.js

• Add the core HTML that will appear on every page, including the Tachyons CSS library:

/* pages/_document.js */
import Document, { Head, Main, NextScript } from 'next/document'
import React from 'react'

import flush from 'styled-jsx/server'

export default class MyDocument extends Document {
  static getInitialProps ({ renderPage }) {
    const { html, head, errorHtml, chunks } = renderPage()
    const styles = flush()
    return { html, head, errorHtml, chunks, styles }
  }

  render () {
    return (
      <html>
        <Head>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link
            rel="stylesheet"
            href="https://unpkg.com/tachyons@4.8.0/css/tachyons.min.css"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

---

TODO

• Automate the setup process, inspired by segmentio/create-next-app:
  • Use Inquirer.js and merge-config in npm postinstall scripts to take command line arguments and customise the setup.