@formidablejs/next-bridge NPM

Next.js Bridge

React server-side rendering for Formidable with Next.js framework.

npm NPM

Requirements

@formidablejs/craftsman: >=0.2.1-alpha.2
@formidablejs/framework: >=0.2.1-alpha.2
next: >=11.1.2
react-dom: >=17.0.2
react: >=17.0.2

Install

npm install @formidablejs/next-bridge next react react-dom --save

Publish

craftsman publish --package @formidablejs/next-bridge -c -v

Configuration

Add NextjsServiceResolver in the config/app.imba config under resolvers:

...

resolvers: {
	...
	require('@formidablejs/next-bridge').NextjsServiceResolver

Note, NextjsServiceResolver must be added after /app/Resolvers/RouterServiceResolver.

Then, register the next.imba config file in the config/index.imba file:

...
import next from './next'

export class Config < ConfigRepository

	# All of the configuration items.
	#
	# @type {Object}

	get registered
		{
			...
			next
		}

Assuming that you installed next-bridge in a new project, you can replace the default / route in the routes/api.imba file with the following route:

import { next } from '@formidablejs/next-bridge'
import { Route } from '@formidablejs/framework'

Route.get '/', next!

When done, you can run the following command to start the server:

craftsman serve --dev

Visit http://localhost:3000/ to see the rendered page.

Usage

To register a new Next.js route, just return next helper method from your route:

import { next } from '@formidablejs/next-bridge'
import { Route } from '@formidablejs/framework'

Route.get '/', next!

This route will load the resources/js/pages/index.js file.

Note: A route path is used as a page path. For example, if our route path was '/about', next-bridge would look for a resources/js/pages/about.js file.

Dynamic Routes

When defining dynamic routes, next-bridge will automatically map your routes to your Next.js pages.

Consider the following route:

import { next } from '@formidablejs/next-bridge'
import { Route } from '@formidablejs/framework'

Route.get '/post/:id', next!

In order for a post page to be loaded for this route, you need to create a resources/js/pages/post/[id].js page:

export function getServerSideProps(request) {
	return {
		props: { params: request.params ?? { } }
	};
}

const Post = (props) => {
	const id = props.params.id

	return <p>Post: {id}</p>
}

export default Post

Now, when visiting /post/10, the Post page will be loaded and the :id will be replaced by 10.

For more information on dynamic routes, see the Next.js documentation.