navigation for next, auto highlight menu item of current route
npm install next-navigationnavigation for next, auto highlight menu item of current route
routes.js, use next-routes for both server side and client side route
``
const nextRoutes = require('next-routes')
const routes = module.exports = nextRoutes()
routes.add('index', '/')
routes.add('login', '/login')
routes.add('about', '/about')
routes.add('posts', '/posts')
routes.add('post', '/p/:title')
`
Header.js use nav in your page
`
import { default as routes, Link } from './routes'
import getNavigation from 'next-navigation'
const MyNav = getNavigation(routes)
export default (props)=>{
var { url } = props
var links = [{
linkProps: { route: "index" },
children: Home,
}, {
linkProps: { route: "about" },
children: About,
activeStyle: { color: 'blue', },
}, {
linkProps: { route: "posts" },
children: Posts,
checkIsActive: ({ pathname }) => {
return ('/post' === pathname) || ('/posts' === pathname)
}
}]
const activeStyle = {
color: 'red',
backgroundColor: '#ddd',
}
{
ulProps: {
className: 'mynav',
},
links,
activeStyle,
activeClassName: 'on',
url,
}
return (
``
https://github.com/nextjs-boilerplate/nextjs-boilerplate