Updated NextJS ReScript Template (ReScript 8.3)

1

Hey everyone.

I took the time to update my NextJS template and also renamed it from “nextjs-default” to a more fitting name:

ReScript 8.3 now allows us to use special characters in file names, which is great for NextJS file conventions (e.g _app.re or [slug].res). The platform is getting better by the month!

I’ve been maintaining this for quite a while now and it’s still my favorite way to start a new project. Maybe you find it useful for guidance.

Cheers

12 Likes
2

Awwwww yesssss this is great @ryyppy! Thank you for maintaining this and shipping it!

2 Likes
3

Is there any performance win on keeping a flat folder structure instead of placing the folders inside src/ and use { "dir": "src", "subdirs": true }, in bsconfig?

4

Not really, you can adapt it to your liking, the only folder that needs to stay in project root are public and pages

1 Like
5

Not use if it’s a good idea to put rescript files directly in pages/ rather than re rexporting them from a different place like pages_res since there’s a big chance of duplicated file names between pages and other modules.

1 Like
6

Thanks for the template, it’s great

Actually, the pages directory can go in the src file too!

Also, would you happen to know how to make a _document file in rescript ?

7

I am not aware of any naming collision than index.js (which you can also circumvent for subdirectory index.js with a folder.js next to folder). Maybe some [slug].js files might collide, but I haven’t run into this issue yet.

I started the pages_res idea because I didn’t have a choice back then. Now I’d probably just use pages if possible.

TIL

The only reason why I had to touch the _document.js file so far was to be able to add a simpleanalytics script to rescript-lang.org. The Next docs state that you shouldn’t touch that file too much, so I kept it in JS format. Also I am not sure if we can efficiently express a class A extends B relationship in ReScript.

1 Like
8

This can be solved by using more specific names like [postSlug].js, [authorSlug].js etc.

1 Like
9

Thanks for your template! However, I’m having a few errors when I use dynamic routing.

bs: 8.3.0
next: 9.5.3

If I create a basic page, it works fine

[@react.component]
let default = () => {
<h1> {React.string("[id]")} </h1>;
};

If I add functions for getStaticPaths or getStaticProps, the compile gives this error:

FAILED: pages/re/[id].d:1: no build statement exists for ‘pages/re’

I resolved the problem by naming the file id.re and creating a symbolic link from [id].js to the compiled output.

Also the GetStaticProps module doesn’t match the documentation. Neither the docs nor Typescript context definition include

query: Js.Dict.t(string),
req: Js.Nullable.t(Js.t('props)),

How are these properties used?

10

Can you create an issue on the template repo and add a minimal reproducible example? I will have a look! For now, you can also have a look at an example within the rescript lang website using getStaticProps / getStaticPaths.

Yes, those typings are wrong, can you open a PR?

11

hello. I’m seeing that the getStaticProps module isn’t making it through the build as it’s unbuilt. I tried referring to the blog post but it looks like it’s no longer there. Thank you.