ReScript / NextJS Template 2021 Update

21

Didn’t see mention of next/image in the Next.res bindings file. Is the <Image /> component ready to use with the default template?

22

Didn’t have the chance using them. Of course, writing a binding is pretty straight-forward… maybe something like this:

module Image = {
  @module("next/image") @react.component
  external make: (
    ~src: string,
    ~width: int,
    ~height: int,
    ~layout: [#fixed | #intrinsic | #responsive | #fill]=?,
    ~quality: int=?,
    ~priority: bool=?,
  ) => React.element = "default"
}

Playground Link

Probably need PRs from contributors who have been heavily using the API before adding it to the template.

1 Like
23

I put “add image binding” on my task list for this week. Seems like a good first contribution.

1 Like
24

I am generally following these guidelines (https://nextjs.org/docs/advanced-features/static-html-export#caveats) to keep the site I am working on a static site, and portable to deployment systems other than Vercel. As a result, I don’t use image for now, although it sounds possible to use it with third party services.

25

I am having issues accessing process.env clientside, I have tried both API_URL & NEXT_PUBLIC_API_URL.

I have added these to the .env.local file, I have also added these to .env.production for next build commands, but nothing.

@val @scope("process") external env: Js.Dict.t<string> = "env"

When I Js.log(env) it just ouputs {}

Any ideas why?

I even added a test ENV Var to the next config and still process.env is an empty object?! This makes ZERO sense

env: {
    ENV: process.env.NODE_ENV,
    TEST: "WHY WHY WHY"
  },

So ends up, the only place that ENV will show is on the server in the server logs, process.env is always empty on the client, something 100% seems broken.

27

Figured it out, I guess NextJS builder just replaces these values, so using rescript wont work unfortunately :frowning:

  let apiURL = %raw(`process.env.NEXT_PUBLIC_API_URL`)
2 Likes
28

@dan003400 I do not know if one approaches is inherently better than the other, but here is an approach that has worked for me. It allows avoiding usage of %raw, which I generally try to do.

@val
external myEnvVariable: option<string> = "process.env.NEXT_PUBLIC_MY_ENV_VARIABLE"
2 Likes
29

I have done it like this

@scope("process.env") @val
external devApiKey: Js.Nullable.t<string> = "NEXT_PUBLIC_API_KEY_GOOGLE_PLACES"
1 Like
30

I am trying to add Sentry to the Template but I am unsure how to merge the current next config file with the sentry config.

Any ideas?

Thanks!