⛳

忙しいNext.js民のためのRemix入門

2024/06/23に公開

この記事の内容は Next.js をやったことがあることを前提とします。

最近 Remix を使って簡単なシステムを作成したので
その際に Next.js と違って少し戸惑った部分について記載します。

Remix について、初心者であるということはご容赦ください。

はじめかた

Next.js の経験があれば、次のコマンドで適当に
プロジェクトを作成すれば、だいたい分かると思います。

% npx create-remix@latest

次の3点を抑えれば、何となく
作業を始められるんじゃないかなと思います。

URLとファイルの対応が独特だと思いました。

/app/routes/auth.callback.slack.tsx で
https://localhost:5173/auth/callback/slack を表します。

/app/routes/auth/callback/slack.tsx などを配置して
あれ？っとなると思います。

https://localhost:5173/ に対応するのは /app/routes/_index.tsx です。
https://localhost:5173/users だとするとシンプルに /app/routes/users.tsx です。

サーバーサイドと連携する方法として
loader と action という実装があります。

純粋にAPIを組みたい場合は、次の方法を使うようです。

NEXT_PUBLIC みたいなのがないです。

フロントに環境変数を渡すのは公式では windowが紹介されていますが
僕はうまくいかなかったので、次の投稿を読んで RootContext を使用しました。

当方は、Slackにてプログラマコミュニティを運営しております。
本記事のように、コミュニティ内で提供している独自システムの開発時に発生した知見を記事からしております。
本記事に関する質問や交流なども行えますので、気軽にご参加を検討して頂けると嬉しいです。