micro-next
micro-next copied to clipboard
Integrations between Micro and Next.js
micro-next
Integrations between Micro and Next.js.

Usage
Install it from npm:
yarn add micro-next
Create a routes.json
file with a list of pages, similar to this one:
[
{
"method": "GET",
"path": "/blog",
"page": "/blog/posts",
"name": "blog-posts"
},
{
"method": "GET",
"path": "/blog/:post",
"page": "/blog/post",
"name": "blog-post"
}
]
Create a server.js
file with the following code:
const routes = require("./routes.json");
const microNext = require("micro-next");
module.exports = microNext({
routes,
next: {
dev: process.env.NODE_ENV !== "production"
}
});
And if you want to easily integrate this client side create a lib/get-page.js
file with the following content:
import get from "micro-next/get";
import routes from "../routes.json";
export default get(routes);
Now you can use it with next/link
:
import Link from "next/link";
import getPage from "lib/get-page.js";
export default () => (
<Link {...getPage("blog-post", { post: 1 })}>
<a>Go to blog post 1</a>
</Link>
);
API
micro-next
A function used to initialize a Next.js custom server with Micro.
-
routes
(array
) The list of custom routes -
next
(object
) A Next.js configuration object
It returns a Micro-ready request handler which run app.prepare
and setup the routes.
micro-next/get
A function used to get the routes by the name already formated to be used with next/link
.
-
routes
(array
) The list of custom routes
This function returns a new function you can export and use to get the href
and as
to pass to next/link
.
-
pageName
(string
) The name of route as defined in your list of routes -
params
(object
) The parameters to use in the URL -
query
(object
) The query to add in the URL (default{}
)
The function returns an object with the following data:
-
href
(string
) The real path of the URL -
as
(as
) The URL to show in the browser