Next.js

Learning Next.js using this tutorial :

Getting started with Next.js

Routing

To achieve client-side routing, use the <link>component which is part of the Link API. It's necessary to import next/link as Link. see the example below

// 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

Link must be used within a div like any other component . However, there is one requirement for components placed inside a Link is that they should accept onClick prop.

Client-Side History Support

when you click back, usually this is handled by next/link instead of being handled in the usual way location.history

Styling a Link

add the rule between {{ and }}. Check the example below

a style={{ fontSize: 20 }}

<Link href="/about">
  <a style={{ fontSize: 20 }}>About Page</a>
</Link>

Props

props are parameters or arguments which are used to customise components. For example,this.props will prefix the variable in the render function. In this case the variable in name 👇 <Text>Hello {this.props.name}!</Text>

the full component is below:

class Greeting extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}

below is an example of how to export the component

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}


AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);

In the browser, the text Hello + name or Greeting name will appear three times:

Hello Rexxar

Hello Jaina

Hello Valeera

Shared components

Creating a component

the example below is an component with two links

import Link from 'next/link'

const linkStyle = {
  marginRight: 15
}

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

export default ComponentName

the component must be imported in order to be used in the site. So in the index.js add the necessary code:

import ComponentName from '../components/ComponentName'

export default () => (
  <div>
    <ComponentName />
    <p>Hello Next.js</p>
  </div>
)

Header.js

Create a Header.js component in the components directory and the use this tag : <Header /> follow the example below in index.js:

import Header from '../components/Header'

export default () => (
  <div>
    <Header />
    <p>Hello Next.js</p>
  </div>
)

this header inside header.js component below includes a link too :

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

Below is an example of a<layout>component:

import Header from './Header'

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
}

const Layout = (props) => (
  <div style={layoutStyle}>
    <Header />
    {props.children}
  </div>
)

export default Layout

Dynamic Pages

Passing data via query strings 👇

Query Parameters

The example below shows a URL with a query param at the end. It starts from ? the name is p and the value is 1

http://example.com/foo?p=1

the format of a query parameter is below

name=value or in the case of the example p=1. The example below has a second query parameter. The first one is separated by using the ? and the second using &.

Query parameters are separate from the path in the sense that they can perform or have an effect on things like caching etc. but they are included in the whole URL when the server makes a request.

http://example.com/foo?p=1&g=neat

An example of using a query parameter string is {/post?title=${props.title}} or 👇

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

The withRouter function needs to be imported from next/router which will input the Next.js router as a property

This is an example the router's “query” object is used and as the query string params

title with props.router.query.title.

import {withRouter} from 'next/router'
import Layout from '../components/MyLayout.js'

const Content = withRouter((props) => (
  <div>
    <h1>{props.router.query.title}</h1>
    <p>This is the blog post content.</p>
  </div>
))

const Page = (props) => (
    <Layout>
      <Content />
   </Layout>
)

export default Page

Clean URLs with Route Masking

Route Masking

Is unique to next.js. It works by showing a different URL on the browser than the actual URL that your app can see. So for example

<Link as={/p/${props.id}} href={/post?title=${props.title}}>

<Link as=...> is the mask

Higher Order Component (HOC)

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.

Concretely, a higher-order component is a function that takes a component and returns a new component