Next.js x ReScript

ReasonML을 사용하는 Next.js 샘플 사용

yarn create next-app --example with-reasonml with-reasonml-app

라이브러리 upgrade

yarn upgrade bs-platform@^9.0.2 reason-react@^0.9.1 react@^17.0.1 react-dom@^17.0.1

샘플을 커맨드로 만들었을 때는 패키지의 버젼이 낡기 때문에 갱신한다.

ReasonML -> ReScript로 변환

for f in pages/**/*.re; do; node_modules/.bin/bsc -format $f > ${f%.re}.res && rm $f; done;
for f in components/**/*.re; do; node_modules/.bin/bsc -format $f > ${f%.re}.res && rm $f; done; 
for f in bindings/**/*.re; do; node_modules/.bin/bsc -format $f > ${f%.re}.res && rm $f; done;

에서 일괄적으로 ReasonML 형식(.re)에서 ReScript 형식(.res)으로 변환할 수 있다.

동작 확인

다음 두 개를 각각 다른 터미널 탭/창에서 실시

yarn dev:reason

yarn dev: next

tailwind

Tailwind는 CSS 프레임 워크 중 하나이며 Next.js에서 사용하는 방법이 공식적으로 실려있다 때문에 일반적으로 따릅니다.

install

yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest

yarn tailwindcss init -p

Next.js에서 읽을 수 있도록

style/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

pages/_app.js

import '../styles/main.css'

export default function MyApp({ Component, pageProps }) {
    return(<div>
        <Component {...pageProps} />
    </div>);
}

tailwind.config.js

module.exports = {
  purge: [
      './pages/**/*.res',
      './components/**/*.res',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

memo

_app.res에서 변환 할 수 없습니까? 라고 생각하지만,
bsconfig에서 suffix를 .bs.js로 설정하고 있기 때문에 _app.res를 작성해도 _app.bs.js에만 있습니다.suffix를 다시 쓰면 .js를 출력 할 수 있지만 .bs.js가 강력히 권장됩니다.

또한 스프레드 연산자 ...의 사용은 권장되지 않습니다.
Props Spread

You can't.

cloneElement를 사용하여 회피를 시도합니다.

_app.res

%raw(`require("../styles/main.css")`)

let make = (~component, ~pageProps) => ReasonReact.cloneElement(
    component,
    ~props=pageProps,
    []
  );

let default = make

가 나오고, global CSS가 읽을 수 있는 것은 어떻게 되어도 pages/_app.js 뿐이라는 사실은 흔들림이 없다는 것을 알 수 있다.
그러나 위의 파일처럼 suffix를 .js로 설정해도 움직이지 않으므로 쓰기가 잘못되었을 수 있습니다. [조사 중]_app.res 예제도 Destructuring 되지 않았습니다.
글쎄, _app.js 정도 JavaScript에서도 그래.

동작 확인

Header를 다음과 같이 변경한다. 외부의 className border-b bg-white py-2 md:py-4로 tailwind를 이용하고 있다.

components/Header.res

@react.component
let make = () =>
    <nav className="border-b bg-white py-2 md:py-4">
        <div>
            <Next.Link href="/">{ReasonReact.string("Home")}</Next.Link>
            <Next.Link href="/about">{ReasonReact.string("About")}</Next.Link>
        </div>
    </nav>

let default = make

그건 그렇고

yarn dev~ 그런데 bsb 오류가 발생하면 다음 스크립트를 실행할 수 있습니다.

first.sh

touch ./node_modules/bs-platform/index.js
sed -i -e 's/^{$/{\n  "main": "index.js",/g' ./node_modules/bs-platform/package.json

vercel에 배포하는 경우 OVERRIDE를 설정하고이 스크립트를 build 명령에 포함시킵니다.

./first.sh && yarn build

Future works

re-tailwind 을 사용하여 타입을 이용한 설정이 가능?
조금 시도한 느낌으로는 움직이지 않았기 때문에 요조사.

추가

rescript 용 react 라이브러리이 있었기 때문에 그곳을 사용합니다.

ReasonReact -> RescriptReact

yarn

yarn remove reason-react
yarn add @rescript/react

migration

bsconfig.json

- "bs-dependencies": ["reason-react"],
+ "bs-dependencies": ["@rescript/react"],

Header.res

-             <Next.Link href="/">{ReasonReact.string("Home")}</Next.Link>
-             <Next.Link href="/about">{ReasonReact.string("About")}</Next.Link>
+             <Next.Link href="/">{React.string("Home")}</Next.Link>
+             <Next.Link href="/about">{React.string("About")}</Next.Link>

다른 위치의 경우 ReasonReact.string를 React.string로 바꿉니다.

다른 표현에 대해서도, 라이브러리 문서 에 기재되어 있으므로 확인되었고.

package.json

-     "dev:reason": "bsb -clean-world -make-world -w",
+     "dev:rescript": "bsb -clean-world -make-world -w",

package.json 에 대해서는 바꾸지 않아도 괜찮지만 바꾸고 싶어진다.

참고문헌

Next.js - Example app using ReasonML & ReasonReact components
ReScript - Migrate from BuckleScript/Reason
ReScript Forum - Purpose, alternatives to next-transpile-modules in next ReScript projects
Tailwind CSS - Install Tailwind CSS with Next.js
ReScript - Configuration - suffix
ReasonReact - Props Spread
ReasonReact - cloneElement
ReScript - Destructuring
re-tailwind
rescript-react
ReScript - rescript-react - Migrate from ReasonReact