Code Monkey home page Code Monkey logo

fastify-nextjs's Introduction

fastify-nextjs

js-standard-style CI workflow

React server side rendering support for Fastify with Next Framework.

Install

npm i fastify-nextjs next --save

Usage

Since Next needs some time to be ready on the first launch, you must declare your routes inside the after callback, after you registered the plugin.
The plugin will expose the api next in Fastify that will handle the rendering for you.

const fastify = require('fastify')()

fastify
  .register(require('fastify-nextjs'))
  .after(() => {
    fastify.next('/hello')
  })

fastify.listen(3000, err => {
  if (err) throw err
  console.log('Server listening on http://localhost:3000')
})

All you server rendered pages must be saved in the folder pages, as you can see in the next documentation.

// /pages/hello.js
export default () => <div>hello world</div>

If you need to pass custom options to next just pass them to register as second parameter.

fastify.register(require('fastify-nextjs'), { dev: true })

If you need to handle the render part yourself, just pass a callback to next:

fastify.next('/hello', (app, req, reply) => {
  // your code
  // `app` is the Next instance
  app.render(req.raw, reply.raw, '/hello', req.query, {})
})

Acknowledgements

This project is kindly sponsored by:

License

Licensed under MIT.

fastify-nextjs's People

Contributors

alekzonder avatar apyrkh avatar awwong1 avatar bartwaardenburg avatar cemremengu avatar daopk avatar delvedor avatar dependabot-preview[bot] avatar eomm avatar ethan-arrowood avatar frikille avatar greenkeeper[bot] avatar jetsly avatar jimmiehansson avatar lependu avatar mcollina avatar millette avatar pabloszx avatar rjoydip avatar serayaeryn avatar zekth avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.