diff --git a/content/2.concepts/5.middleware/.template/files/middleware/hello-foo.ts b/content/2.concepts/5.middleware/.template/files/middleware/hello-foo.ts
new file mode 100644
index 0000000..ab0fba7
--- /dev/null
+++ b/content/2.concepts/5.middleware/.template/files/middleware/hello-foo.ts
@@ -0,0 +1,3 @@
+export default defineNuxtRouteMiddleware(() => {
+ console.log('hello-foo')
+})
diff --git a/content/2.concepts/5.middleware/.template/solutions/middleware/my-middleware.global.ts b/content/2.concepts/5.middleware/.template/solutions/middleware/my-middleware.global.ts
index 8c2fa18..ba62088 100644
--- a/content/2.concepts/5.middleware/.template/solutions/middleware/my-middleware.global.ts
+++ b/content/2.concepts/5.middleware/.template/solutions/middleware/my-middleware.global.ts
@@ -1,9 +1,9 @@
export default defineNuxtRouteMiddleware((to) => {
- // FIXME: import . meta . server が置換されてしまう
- if (import.meta.server)
+ // import.meta を利用した分岐でも OK
+ if (!window?.localStorage)
return
- const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn') || 'false')
+ const isSignedIn = JSON.parse(window.localStorage.getItem('isSignedIn') || 'false')
if (!isSignedIn && to.path !== '/') {
return navigateTo('/')
diff --git a/content/2.concepts/5.middleware/.template/solutions/pages/foo.vue b/content/2.concepts/5.middleware/.template/solutions/pages/foo.vue
index 8fb7308..6c82990 100644
--- a/content/2.concepts/5.middleware/.template/solutions/pages/foo.vue
+++ b/content/2.concepts/5.middleware/.template/solutions/pages/foo.vue
@@ -1,9 +1,3 @@
-
-
Foo
diff --git a/content/2.concepts/5.middleware/index.md b/content/2.concepts/5.middleware/index.md
index 6b9a411..6f102f6 100644
--- a/content/2.concepts/5.middleware/index.md
+++ b/content/2.concepts/5.middleware/index.md
@@ -59,11 +59,12 @@ definePageMeta({
これらのミドルウェアは、クライアント上でのナビゲーション時はもちろん、SSR または SSG でのページ生成時にもサーバーサイドで実行されます。\
ミドルウェアでローカルストレージなどのクライアントサイドの API を使用する場合は、クライアントサイドのみで実行されるようにする必要があります。\
-`import.meta` を使うことで実行している環境を判定することができます。サーバーサイドでの実行スキップする場合は `import.meta.server` を利用します。
+`import.meta` を使うことで実行している環境を判定することができます。
+サーバーサイドでの実行スキップする場合は `import.meta.server` を利用します。
```ts
export default defineNuxtRouteMiddleware((to) => {
- // skip middleware on server
+ // skip middleware on server (if (import.meta.client) { ... } でも同様)
if (import.meta.server)
return