Next and Now: Alternative starting sequence

While it is a good idea to understand the standard React starting procedure (create-react-app) as well as more complex application state management (Redux), sometimes you just want to ship code quickly and simply.

Next

Next is a super simple framework for creating server-rendered or statically-exported React apps. Getting started is easy, and your app stays comfortably lightweight (especially in comparison to create-react-app).

Start by installing the node dependencies

yarn add next
yarn add react
yarn add react-dom

Then, create a file package.json in your root directory

// package.json
{
    "license": "MIT",
    "scripts": {
        "dev": "next",
        "build": "next build",
        "start": "next start"
    }
}

Finally, build your application in the pages folder of your directory

You can use React components, but the structuring reflects simpler web design. Each web page is its own javascript file in the pages directory.

// pages/index.js
export default () =>
    <div class="sampleClass">
        This is a sample page using Next!
        <style>
            .sampleClass {
                backgroundColor: "gray"
            }
        </style>
    </div>

zeit/next.js

Now

When you’re ready to share what you’ve created, it’s easy to deploy your static React app with Now (both Next and Now are built by Zeit, a company that makes intuitive and useful dev tools).

Make sure you have Now Desktop installed

Apps

It’s just one step to deploy

now

Now

Now what?

Build something awesome.