React Framework - Next.js

Common Component

A component directory can be named anything (by convention components), the only special directory is the pages directory. You can even create the Component inside the pages directory if you need a direct URL to your component.

A React Component

• a Header component with a next link

import Link from 'next/link'

const linkStyle = {
  marginRight: 15
}

const Header = () => (
  <div>
    <Link href="/">
      <a style={linkStyle}>Home</a>
    </Link>
    <Link href="/about">
      <a style={linkStyle}>About</a>
    </Link>
  </div>
)

export default Header

Layout

see React - Composite Component (Layout) / Container Component

Link

Navigation / Routing

• client-side navigation: Link API, which is exported via next/link (handle the location.history of the browser)
• next/link is a higher order component which only accepts the “href” and some similar props.
• Link Works With Anything inside. Just like an anchor, a button, you can place any React components or even a div
• The only requirement for components placed inside a Link is they should accept an onClick prop
• Routing doc

// This is the Link API
import Link from 'next/link'

const Index = () => (
  <div>
    <Link href="/about">
      <a>About Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
)

export default Index

Route masking

• The as prop is the URL in the browser bar (logical)
• The href prop is the URL the app is seeing (physical)

Example:

const PostLink = props => (
  <li>
    <Link as={`/p/${props.id}`} href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
)

SSR

SSR with custom-server-and-routing

You can use any Node.js Web server with this API.

For instance, with express

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app
  .prepare()
  .then(() => {
    const server = express()

    // Custom route
    server.get('/p/:id', (req, res) => {
      const actualPage = '/post'
      const queryParams = { title: req.params.id }
      app.render(req, res, actualPage, queryParams)
    })

    server.get('*', (req, res) => {
      return handle(req, res)
    })

    server.listen(3000, err => {
      if (err) throw err
      console.log('> Ready on http://localhost:3000')
    })
  })
  .catch(ex => {
    console.error(ex.stack)
    process.exit(1)
  })

• Install

npm install --save express
npm install --save-dev cross-env

• Package.json

{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "cross-env NODE_ENV=production node server.js"
  }
}

SSR vs Client Side

If we can only see the message on the browser console. That's because we navigated to the post page via the client side.

When we click on a link wrapped with the Next.js <Link> component, the page transition takes place in the browser, without making a request to the server.

If you just visit a post page directly by typing the URL in the browser address (eg:- http://localhost:3000/p/975) you will see the console message printed on the server but not in the client.

Local

import Layout from '../components/MyLayout.js'
import Link from 'next/link'

function getPosts() {
    return [
        {id: 'hello-nextjs', title: 'Hello Next.js'},
        {id: 'learn-nextjs', title: 'Learn Next.js is awesome'},
        {id: 'deploy-nextjs', title: 'Deploy apps with ZEIT'}
    ]
}

export default function Blog() {
    return (
        <Layout>
            <h1>My Blog</h1>
            <ul>
                {getPosts().map(post => (
                    <li key={post.id}>
                        <Link as={`/p/${post.id}`} href={`/post?title=${post.title}`}>
                            <a>{post.title}</a>
                        </Link>
                    </li>
                ))}
            </ul>
            <style jsx>{`
        h1,
        a {
          font-family: 'Arial';
        }

        ul {
          padding: 0;
        }

        li {
          list-style: none;
          margin: 5px 0;
        }

        a {
          text-decoration: none;
          color: blue;
        }

        a:hover {
          opacity: 0.6;
        }
      `}</style>
        </Layout>
    )
}

Global

<style jsx global></script>

Example:

npm install --save react-markdown

import Layout from '../components/MyLayout.js'
import { withRouter } from 'next/router'
import Markdown from 'react-markdown'

export default withRouter(props => (
  <Layout>
    <h1>{props.router.query.title}</h1>
    <div className="markdown">
      <Markdown
        source={`
This is our blog post.
Yes. We can have a [link](/link).
And we can have a title as well.

### This is a title

And here's the content.
     `}
      />
    </div>
    <style jsx global>{`
      .markdown {
        font-family: 'Arial';
      }

      .markdown a {
        text-decoration: none;
        color: blue;
      }

      .markdown a:hover {
        opacity: 0.6;
      }

      .markdown h3 {
        margin: 0;
        padding: 0;
        text-transform: uppercase;
      }
    `}</style>
  </Layout>
))

Code splitting

Next.js does automatic code splitting and it is based on the pages in your app. For example, if one of your modules is used at-least in half of your pages, then it moves into the main JavaScript bundle. If not, that module stays inside the page's bundle.

https://nextjs.org/learn/excel/lazy-loading-modules

React Component

https://nextjs.org/learn/excel/lazy-loading-components

Locally

Build produce an optimized set of code for production

"scripts": {
  "build": "next build"
  "start": "next start"
  "startonlinuxport": "next start -p $PORT"
  "startonwindowsport": "next start -p %PORT%"
}

npm run build

Creating an optimized production build ...

Compiled successfully.

 ┌ /
 ├ /_app
 ├ /_document
 ├ /_error
 ├ /about
 └ /post

• Once on the default 300 port

npm run start

• on windows, two instances with two different ports

:: Install cross-env globally
npm install cross-env -g
:: Run on port 8000
cross-env PORT=8000 npm run startonwindowsport
:: Run on port 9000
cross-env PORT=9000 npm run startonwindowsport

now

The now platform has special builder for next application called @now/next. The builder will convert the next pages into a series of individual lambdas and serves them statically. More … see Create a Next.js Application and Deploy with Now guide

module.exports = {
  target: 'serverless'
}

{
  "version": 2,
  "builds": [{ "src": "package.json", "use": "@now/next" }],
  "name": "<name-for-your-project>"
}

• Install now-cli

npm install -g now

• run the “now” command from your terminal inside your app's root directory.

now

More Serverless Hosting - Now