## はじめに

このブログはNext.jsで作っています。
Next.js便利だなと思っている反面、他にいいものはないかなと調べていたら、、

 

https://www.epicweb.dev/why-i-wont-use-nextjs

 

こういう記事を目にすることがあり、 
ちょっとRemixを触ってみようという気になったので、 
すごい初歩のRemixクイックスタートの記事を書いてみました！

 

https://remix.run/docs/en/main/start/quickstart

 

## CLIを使用する場合

下記のように進むとRemixがテンプレートを作ってくれる。

```bash
npx create-remix@latest

# 質問
Where should we create your new project?
.

Initialize a new git repository? (recommended)
No

Install dependencies with npm? (recommended)
Yes

```

ちょっと、npmで構成している時間が1分くらいあったので遅いかなと感じました。

なので、今回は公式にもあるように一から進めてみようと思います。

 

## 一から作っていく場合

```bash
mkdir remix-app && cd remix-app
npm init -y

# remixをインストール
npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom
# typescript使用時
npm i -D @types/node @types/react @types/react-dom typescript

# ビルドツールはviteを使用
npm i -D @remix-run/dev vite vite-tsconfig-paths
```

どうやら、RemixはViteを使用しておりプラグインが充実している。 
こちらも公式に沿ってViteの設定をする。 
他にもViteより10倍早いと言われている`Turbopack`もあるがRemixのプラグインにあるか調べきれてないので、 
とりあえず、Viteで進める。

```javascript:vite.config.ts
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths"

export default defineConfig({
 plugins: [ remix(), tsconfigPaths()],
 server: {
 port: 3001,
 },
 build: {
 outDir: "build"
 }
});
```

このファイルでポートを任意の番号に変更できる。

 

## ルートを作成

```bash
mkdir app
touch app/root.tsx
```

```typescript:root.tsx
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react"
import { ReactNode } from "react";
import "@/styles/global.scss"

export function Layout({children}: {children: ReactNode}) {
 return (
 <html lang="ja">
 <head>
 <meta charSet="utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <Meta />
 <Links />
 </head>
 <body>
 {children}
 <ScrollRestoration />
 <Scripts />
 </body>
 </html>
 )
}

export default function App() {
 return <Outlet />;
}
```

これが大元を司っているファイル。 
`ScrollRestoration`は、ブラウザのスクロール位置を覚えておき、 
ブラウザバックで戻ってきたときに、同じ位置で表示してくれる。

 

# viteの設定ファイルを作成

```typescript:vite.config.js
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths"

export default defineConfig({
 plugins: [ remix(), tsconfigPaths()],
 server: {
 port: 3001,
 },
 build: {
 outDir: "build"
 }
});
```

package.jsonに追記。

```shell
"dev": "remix vite:dev",
"build": "remix vite:build"
```

無事に`localhost:3001`で起動した！

このコマンドは、 
`Cloudflare Workers、Netlify、Vercel、Fastly、AWS、Deno、Azure、Fastify、Firebase`などどの環境でも動作するようにできている。

また独自のサーバーを組み込むことも可能。 
しかし、RemixはViteを推しているようなのでこのままViteを使ってみる。

 

## Tailwindを入れてみる

せっかくなので、TailwindCssを導入してみる。

```
npm i tailwindcss postcss autoprefixer sass
```

個人的にcssよりsassの方が好きなのでここで一緒に入れておく。

### 設定ファイルを生成

```
npx tailwindcss init -p
```

### tailwind.config.js

上記のコマンドで`tailwind.config.js`ファイルが作成されている。 
appディレクトリ以下に適用させるように設定。

```javascript:tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
 content: [
 "./app/**/*.{js,ts,jsx,tsx}",
 ],
 theme: {
 extend: {},
 },
 plugins: [],
}
```

### グローバルscssファイルで読み込む

```css:global.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
```

これで無事にTailwindのスタイルが適用された！

 

## まとめ

Next.jsを使用していると、結構ブラックボックスになる部分が個人的にはあると思っていたので、 
ゼロイチのような感じで構築できていけるのは書いてて楽しい気がする😇 
ちょっとハマりそうなので、今後ルーティングやサーバー側の処理の内容を書けたらなって思っている！

 

https://github.com/zaki-app/remix-app

Zaki-dev

Remixの記事

【Typescript】Remixクイックスタート