Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/revskill10/next-routes-middleware
Universal Lambda Routing
https://github.com/revskill10/next-routes-middleware
expressjs nextjs
Last synced: about 1 month ago
JSON representation
Universal Lambda Routing
- Host: GitHub
- URL: https://github.com/revskill10/next-routes-middleware
- Owner: revskill10
- License: mit
- Created: 2018-12-01T02:34:05.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-03-07T09:59:47.000Z (over 2 years ago)
- Last Synced: 2024-09-30T15:01:34.231Z (about 1 month ago)
- Topics: expressjs, nextjs
- Language: JavaScript
- Homepage: https://next-routes-middleware-4ari798pi.now.sh/
- Size: 105 KB
- Stars: 40
- Watchers: 3
- Forks: 9
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-nextjs - next-routes-middleware - A NextJS routing middleware (Extensions)
- fucking-awesome-nextjs - next-routes-middleware - A NextJS routing middleware (Extensions)
README
## Next Routes Middleware
[](https://www.npmjs.com/package/next-routes-middleware)
Universal Lambda Routing for Next.JS application
## Roadmap for 4.0.0
1. [Integrate with existing `now.json` in `now.config.js` for better integration with existing ecosystem](https://github.com/revskill10/next-routes-middleware/issues/13)
2. [Provide @now/node to replace @now/next (Next V8 provides a serverless lambda out of the box)](https://github.com/revskill10/next-routes-middleware/issues/10)
## Demo
[Demo](https://next-routes-middleware-4ari798pi.now.sh/)
## Installation
```
npm i --save next-routes-middleware
```
## Features
- Replicate `next.js` for Now V2 config to develop locally.
- Support named regular expressions used in `routes`.
- Allow custom routes handling with all Express.js http methods.
- Client-side routing
- Compiling to Now V2 compatible JSON config
## Usage
Step 1: Create your own `now.config.js`:
```js
const buildTypes = [
"@now/next",
"@now/static"
]
const builds = [
{
src: "next.config.js", use: buildTypes[0]
},
{
src: "static", use: buildTypes[1]
}
]
const nextRoutes = ['/about'].map(function(item, index) {
return {
src: item,
dest: item,
build: buildTypes[0],
}
})
const deployConfig = {
version: 2,
name: "next-routes-middleware",
public: true,
alias: "next-routes-middleware"
}
const patterns = {
first: "(?.*)",
uuid: "(?[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}){1}",
slug:"(?[^/]*)",
year:"(?[0-9]{4})",
month:"(?[0-9]{2})",
day:"(?[0-9]{2})"
}
const routes = [
{
src: "/favicon.ico",
dest: "static/favicon.ico",
build: buildTypes[0],
},
...nextRoutes,
{
src: `/w/${patterns.first}`,
dest: "/work?slug=${first}",
build: buildTypes[0],
},
{
src: `/resource/${patterns.uuid}`,
dest: "/complex?id=${uuid}",
build: buildTypes[0],
},
{
src: `/t/${patterns.slug}/${patterns.year}-${patterns.month}-${patterns.day}`,
dest: "/more_complex?day=${day}&month=${month}&year=${year}&slug=${slug}" ,
build: buildTypes[0],
},
{ src: "/", dest: "/index", build: buildTypes[0], }
]
module.exports = {
...deployConfig,
patterns,
builds,
routes,
}
```
*Note*: You can skip step 2 by using [now-dev-cli](https://github.com/revskill10/now-dev-cli), which will run this custom server for you.
Step 2: Using `next-routes-middleware` in your custom `server.js`
```js
const express = require('express')
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const routesMiddleware = require('../../index')
const port = parseInt(process.env.PORT, 10) || 3000
const config = require('./now.config.js')
app.prepare().then(() => {
const server = express()
const prefix = ""
routesMiddleware({server, app, config, prefix})
server.listen(port, (err) => {
if (err) throw err
console.log(`> Ready on http://localhost:${port}`)
})
})
```
Step 3: Using in `pages/more_complex.js`
```js
import {withRouter} from 'next/router'
import Nav from '../components/nav'
const Page = ({router}) => {
const {
query
} = router
const {day, month, year, slug} = query
return (
<>
Slug is {slug}
You requested {year}-{month}-{day}
>
)
}
export default withRouter(Page)
```
## Customization and Overriding Routes
Suppose you want to do something else beyond rendering, you can provide custom routes handler like this
`customRoutes.js`
```js
function customRoutes(nextRoutes) {
return {
'/service-worker.js': function({app, req, res, join, dev}) {
const filePath = dev ? join(__dirname, '../static', 'service-worker.dev.js'): join(__dirname, '../static', 'service-worker.js')
app.serveStatic(req, res, filePath)
},
'/favicon.ico': function({app, req, res, join}) {
const filePath = join(__dirname, '../static', 'favicon.ico')
app.serveStatic(req, res, filePath)
},
'/static/wasm/*': function({app, req, res, next, handle, pathname}) {
res.setHeader('Content-Type', 'application/wasm')
handle(req, res, parsedUrl)
},
'/': function({app, req, res, isMobile, query}) {
if (!isMobile) {
app.render(req, res, '/index', {phone: false, ...query })
} else {
app.render(req, res, '/index', {phone: true, ...query})
}
},
...nextRoutes,
'*': function({handle, req, res, parsedUrl}) {
handle(req, res, parsedUrl)
},
}
}
module.exports = customRoutes
```
Then use in your custom `server.js`
```js
const customRoutes = require('./customRoutes')
routesMiddleware({server, app}, customRoutes)
```
## Compiled now config file
This is the compiled Now config file
```json
{
"version": 2,
"name": "next-routes-middleware",
"public": true,
"alias": "next-routes-middleware",
"patterns": {
"first": "(?.*)",
"uuid": "(?[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}){1}",
"slug": "(?[^/]*)",
"year": "(?[0-9]{4})",
"month": "(?[0-9]{2})",
"day": "(?[0-9]{2})"
},
"builds": [
{
"src": "next.config.js",
"use": "@now/next"
},
{
"src": "static",
"use": "@now/static"
}
],
"routes": [
{
"src": "/favicon.ico",
"dest": "static/favicon.ico"
},
{
"src": "/about",
"dest": "/about"
},
{
"src": "/w/(?.*)",
"dest": "/work?slug=$first"
},
{
"src": "/resource/(?[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}){1}",
"dest": "/complex?id=$uuid"
},
{
"src": "/t/(?[^/]*)/(?[0-9]{4})-(?[0-9]{2})-(?[0-9]{2})",
"dest": "/more_complex?day=$day&month=$month&year=$year&slug=$slug"
},
{
"src": "/",
"dest": "/index"
}
]
}
```
## Usage with next/link and styled-components for client-side routing
`styled-link.js`
```js
import Link from 'next/link'
import styled from 'styled-components'
import mkLink from 'next-routes-middleware/get-client-link'
import config from '../now.config.js'
const getClientLink = mkLink(config)
const NextLink = ({href, className, children, ...rest}) => {
const as = getClientLink(href)
return (
{children}
)
}
const StyledLink = styled(NextLink)`
color: #067df7;
text-decoration: none;
font-size: 13px;
`
export default StyledLink
```
## Usage on client-side
```js
import StyledLink from './styled-link'
Work
Resource
More resource
```