Shadowgraph
TrendingAbout
Sign in

mrmurphy/reason-nextjs

ReasonML (& bucklescript) wrappings for Next.js

Reason

44

18 commits

updated Jan 5, 2023

See the code

README

Next.js, but in ReasonML and Bucklescript!

Type definitions for Next.js.

State:

  • Mostly complete type definitions. Feel free to open a pull-request to add more!
  • Wraps API for Next version 9.x.x on NPM
  • Only works with Bucklescript 7.x and above.

The Basics.

  1. Have a reason project already set up

  2. Install:

npm install --save next@9 reason-nextjs

(Notice how you installed both next and nextdotbs!)

  1. Add "reason-nextjs" to your "bs-dependencies" in your "bsconfig.json"

  2. Install ReasonReact

  3. mkdir pages

  4. Make a file: src/pages/WelcomePage.re that defines a React component named default.

open React;
open Next;

[@react.component]
let default = () => {
  <div>
    <Head>
      <title> "Welcome"->string </title>
    </Head>
    "Welcome to Next"->string
  </div>;
};
  1. Symlink that file into the pages directory:

cd pages && ln -s ../src/pages/WelcomePage.bs.js welcome.js

The symlinking allows us to still use the .bs.js postfix for Reason files, and also allows us to use dynamic routing and name files with square brackets inside of the pages directory without upsetting bsb.

  1. Launch Next and open the browser, etc. as explained in the Next.js docs

Data Fetching

Next performs data fetching for page components by looking for a static function on the component class called getInitialProps. This isn't a pattern that ReasonReact likes, so instead, these wrappings expose a function called assignPropsFetcher that you pass your default value (from creating the React component) to:

open React;
open Next;

[@react.component]
let default = (~message: string) => {
  <div>
    <Head>
      <title> "Welcome"->string </title>
    </Head>
    "Welcome to Next"->string
  </div>;
};

// Notice how I match the props for the component above!
type props = {message: option(Post.t)};

let fetcher: propsFetcher(props) =
  ({req, query}) => {
    // ... do some async stuff we don't show here and get a value called "message" in scope. 🧙‍♂️
    {message: message}->Js.Promise.resolve;
  };

default->assignPropsFetcher(fetcher);

That's most of it! So to re-cap, you can use it just like Next.js except:

  • Symlink your compiled Reason artifacts into the correct location in the pages folder.
  • Use assignPropsFetcher instead of getInitialProps.
  • The req param that gets passed into the props fetcher will be None on the client, but will be an object with a headers field on the server. If you're making a request from your own server to your own API to populate data, you can get the host and use it as the host for your HTTP request.

Other things to note:

  • A Head React component is available for inserting tags into the head of the document.
  • A Link React component is availalbe for slick in-app navigation.

Usage with Serbet.

You may want to run Next alongside your own API, and you may be using Serbet for that. Here's how they can work together:

open Async;

let nextServer =
  NextServer.make({
    dev:
      !
        Node.Process.process##env
        ->Js.Dict.get("NODE_ENV")
        ->Belt.Option.map(a => a == "production")
        ->Belt.Option.getWithDefault(false),
  });

{
  let%Async _ = nextServer->NextJSServer.prepare;
  let app =
    Serbet.application([
      // your API routes here
    ]);
  app.router->Express.Router.use(nextServer->NextServer.getRequestHandler);
  async();
};

Contributors

mrmurphy

15 commits

sync

3 commits

Similar repos

jonasbuntinx/next-purescript-example

Simple example app using Next.js with Purescript

67

kaush4l/NextJS

0

ml-in-barcelona/server-reason-react

Native implementation of React's Server-side rendering (SSR) and React Server Components (RSC)…

178

webml-community/next-server-template

Space

next-server

8

ryyppy/rescript-nextjs-template

Opinionated Boilerplate for NextJS, Tailwind and ReScript

404

LDingLDing/langchain-js

1

afinmh/HybridGraphRAG

Bismillah speedrun TA bosss

0

gilankpam/notedpak

3

Languages

Reason

64.0%

JavaScript

36.0%

mrmurphy/reason-nextjs

ReasonML (& bucklescript) wrappings for Next.js

Reason

44

18 commits

updated Jan 5, 2023

See the code

README

Next.js, but in ReasonML and Bucklescript!

Type definitions for Next.js.

State:

  • Mostly complete type definitions. Feel free to open a pull-request to add more!
  • Wraps API for Next version 9.x.x on NPM
  • Only works with Bucklescript 7.x and above.

The Basics.

  1. Have a reason project already set up

  2. Install:

npm install --save next@9 reason-nextjs

(Notice how you installed both next and nextdotbs!)

  1. Add "reason-nextjs" to your "bs-dependencies" in your "bsconfig.json"

  2. Install ReasonReact

  3. mkdir pages

  4. Make a file: src/pages/WelcomePage.re that defines a React component named default.

open React;
open Next;

[@react.component]
let default = () => {
  <div>
    <Head>
      <title> "Welcome"->string </title>
    </Head>
    "Welcome to Next"->string
  </div>;
};
  1. Symlink that file into the pages directory:

cd pages && ln -s ../src/pages/WelcomePage.bs.js welcome.js

The symlinking allows us to still use the .bs.js postfix for Reason files, and also allows us to use dynamic routing and name files with square brackets inside of the pages directory without upsetting bsb.

  1. Launch Next and open the browser, etc. as explained in the Next.js docs

Data Fetching

Next performs data fetching for page components by looking for a static function on the component class called getInitialProps. This isn't a pattern that ReasonReact likes, so instead, these wrappings expose a function called assignPropsFetcher that you pass your default value (from creating the React component) to:

open React;
open Next;

[@react.component]
let default = (~message: string) => {
  <div>
    <Head>
      <title> "Welcome"->string </title>
    </Head>
    "Welcome to Next"->string
  </div>;
};

// Notice how I match the props for the component above!
type props = {message: option(Post.t)};

let fetcher: propsFetcher(props) =
  ({req, query}) => {
    // ... do some async stuff we don't show here and get a value called "message" in scope. 🧙‍♂️
    {message: message}->Js.Promise.resolve;
  };

default->assignPropsFetcher(fetcher);

That's most of it! So to re-cap, you can use it just like Next.js except:

  • Symlink your compiled Reason artifacts into the correct location in the pages folder.
  • Use assignPropsFetcher instead of getInitialProps.
  • The req param that gets passed into the props fetcher will be None on the client, but will be an object with a headers field on the server. If you're making a request from your own server to your own API to populate data, you can get the host and use it as the host for your HTTP request.

Other things to note:

  • A Head React component is available for inserting tags into the head of the document.
  • A Link React component is availalbe for slick in-app navigation.

Usage with Serbet.

You may want to run Next alongside your own API, and you may be using Serbet for that. Here's how they can work together:

open Async;

let nextServer =
  NextServer.make({
    dev:
      !
        Node.Process.process##env
        ->Js.Dict.get("NODE_ENV")
        ->Belt.Option.map(a => a == "production")
        ->Belt.Option.getWithDefault(false),
  });

{
  let%Async _ = nextServer->NextJSServer.prepare;
  let app =
    Serbet.application([
      // your API routes here
    ]);
  app.router->Express.Router.use(nextServer->NextServer.getRequestHandler);
  async();
};

Similar repos

jonasbuntinx/next-purescript-example

Simple example app using Next.js with Purescript

67

kaush4l/NextJS

0

ml-in-barcelona/server-reason-react

Native implementation of React's Server-side rendering (SSR) and React Server Components (RSC)…

178

webml-community/next-server-template

Space

next-server

8

ryyppy/rescript-nextjs-template

Opinionated Boilerplate for NextJS, Tailwind and ReScript

404

LDingLDing/langchain-js

1

afinmh/HybridGraphRAG

Bismillah speedrun TA bosss

0

gilankpam/notedpak

3

Contributors

mrmurphy

15 commits

sync

3 commits

Languages

Reason

64.0%

JavaScript

36.0%