sacajawea v1.0.1

Sacajawea

Manage your multi-language routes with Next.js, easily

Based on Next-Routes and next-routes-with-locale with possibility to add routes with the same name but different for locale/pattern

In the future I will want to implement:

• handle error with exact status code
• route middleware

How to use

Install:

npm install sacajawea --save

Create routes.js inside your project:

const routes = require('sacajawea ')({ locale: 'en' }) // this locale is the default language

routes
.add('about', 'en', '/about')
.add('about', 'it', '/chi-siamo')
.add('news', 'en','/news/:slug', 'news-detail')
.add('news', 'it','/notizia/:slug', 'news-detail')
...

Server-side

// server.js
const next = require('next')
const routes = require('./routes')
const app = next({dev: process.env.NODE_ENV !== 'production'})
const handler = routes.getRequestHandler(app)

// With express -- RECOMMENDED
const express = require('express')
app.prepare().then(() => {
  express().use(handler).listen(3000)
})

// Without express
const {createServer} = require('http')
app.prepare().then(() => {
  createServer(handler).listen(3000)
})

Client-side

Import Link and Router from your routes.js file to generate URLs based on route definition:

Link

// pages/index.js
import {Link} from '../routes'

export default () => (
  <div>
    <div>Hi, Sacajawea!</div>
    <Link href='news' locale='en' params={{slug: 'do-you-need-directions'}}>
      <a>Please, show me the right way</a>
    </Link>
  </div>
)

##API

###routes.add This function add a new route

If you route have match parameter on URL, all data is merged info query. Available inside getInitialProps function

export default class News extends React.Component {
  static async getInitialProps ({query}) {
    // query.slug
  }
  render () {
    // this.props.url.query.slug
  }
}

RequestHandler automatically sets req.locale to a locale of a matched route so you can use it in your app.

Router example

// pages/home.js
import React from 'react'
import {Router} from '../routes'

export default class Home extends React.Component {
  onClick () {
    // With route name and params -- automaritically get current locale
    Router.pushRoute('news', {slug: 'hi-world'})
    // With route name and params and explicit locale
    Router.pushRoute('news', {slug: 'hi-world'}, 'en')
  }
  render () {
    return (
      <div>
        <button onClick={this.onClick}>News</button>
      </div>
    )
  }
}

Arguments:

• route - Route name
• locale - Route locale
• params - Optional parameters for named routes

The same works with .replaceRoute() and .prefetchRoute()

It generates the URLs and calls next/router

Optionally you can provide custom Link and Router objects, for example:

const routes = module.exports = require('next-routes')({
  Link: require('./my/link')
  Router: require('./my/router')
})