Highly experimental plugin for server.js:
Renders React both server-side and browser-side by using next underneath. Write React for managing your views and make your website faster as a SPA.
npm install server @server/reactFirst thing in your index.js file:
const server = require('server');
server.plugins.push(require('@server/react'));
server(...);Then you can add routes to it. See the example from this project's repository in the index.js:
const server = require('server');
server.plugins.push(require('@server/react'));
const { get } = server.router;
const { render } = server.reply;
// Will automatically serve this and any page in 'pages'
server(
get('/b/:subreddit', ctx => render('handler.js')),
);Each page that you create under the pages folder will be automatically linked, and here we are also handling any subreddit manually with handler.js.
For our main page, pages/index.js:
// pages/index.js
import React from 'react';
import Link from 'next/link';
import Nav from './Nav.js';
export default props => (
<main>
<Nav>Main page</Nav>
<h1>Hello {props.user}</h1>
<p>I am working quite nicely</p>
<Link href="/about">About me</Link>
</main>
);For more information about us:
import React from 'react';
import Link from 'next/link';
import Head from 'next/head';
export default class About extends React.Component {
static async getInitialProps ({ req }) {
return {
server: !!req
};
}
render () {
return (
<div>
<style jsx>{`button { background: red; }`}</style>
<Head>
<title>Hello {this.props.server ? 'server' : 'client'}</title>
</Head>
Hi {this.props.server ? 'server' : 'client'}
<Link href="/">
<button>Homepage</button>
</Link>
</div>
);
}
}For dynamic routes in pages/handler.js:
import React from 'react';
import Nav from './Nav.js';
export default props => (
<div>
<Nav>Sub!</Nav>
<p>Subpage {props.url.query.subreddit}</p>
</div>
);