{"id":5170,"date":"2022-07-13T09:13:05","date_gmt":"2022-07-13T00:13:05","guid":{"rendered":"https:\/\/katblog.manadream.net\/?p=5170"},"modified":"2022-07-15T15:04:48","modified_gmt":"2022-07-15T06:04:48","slug":"nextjs-supabase","status":"publish","type":"post","link":"https:\/\/katblog.manadream.net\/index.php\/2022\/07\/13\/nextjs-supabase\/","title":{"rendered":"\u3010\u7c21\u5358\u3011Next.js + supabase\uff08\u5b8c\u5168\u7121\u6599\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u7248\uff09\u74b0\u5883\u69cb\u7bc9\uff01"},"content":{"rendered":"

\u3069\u3046\u3082\u3001kat\u3067\u3059\u3002<\/p>\n

\u4eca\u56de\u306f\u3001Next.js<\/strong>\u3068supabase<\/strong>\uff08\u30ed\u30fc\u30ab\u30eb\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u7248\uff09\u3092\u4f7f\u3063\u305f\u958b\u767a\u74b0\u5883\u306e\u69cb\u7bc9\u3092\u884c\u3063\u3066\u3044\u304d\u307e\u3059\uff01<\/p>\n

\u30a8\u30e9\u30fc\u304c\u51fa\u305f\u5834\u5408\u306e\u5bfe\u51e6\u6cd5<\/span>\u306b\u3064\u3044\u3066\u3082\u66f8\u3044\u3066\u3044\u304d\u307e\u3059\u306e\u3067\u3001\u305c\u3072\u53c2\u8003\u306b\u3057\u3066\u3044\u305f\u3060\u3051\u305f\u3089\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n

Next.js\u3068\u306f\uff1f<\/h2>\n\n\n

React.js\u30d9\u30fc\u30b9\u306e\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9Javascript\uff08Node.js\uff09\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af<\/span>\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n

\u8981\u306f\u3001PHP\u306a\u3069\u3068\u540c\u3058\u304f\u3001\u30b5\u30fc\u30d0\u30fc\u3092\u7acb\u3061\u4e0a\u3052\u3066\u3001\u30b5\u30a4\u30c8\u306e\u88cf\u5074\u3067\u52d5\u304fJavascript\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002<\/p>\n

\u7279\u5fb4\u3068\u3057\u3066\u306f\u3001\u30ea\u30af\u30a8\u30b9\u30c8\u6642\u3060\u3051\u3067\u306a\u304f\u3001\u30bd\u30fc\u30b9\u306e\u30d3\u30eb\u30c9\u6642\u306b\u9759\u7684HTML\u3092\u751f\u6210\u3057\u3066\u3057\u307e\u3046\u6a5f\u80fd\u304c\u3042\u308b\u306a\u3069\u3001\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u5468\u308a\u306e\u81ea\u7531\u5ea6<\/span>\u304c\u9ad8\u304b\u3063\u305f\u308a\u3057\u307e\u3059\u3002<\/p>\n

\u307e\u305f\u3001\u9ad8\u3044\u30b7\u30a7\u30a2\u7387\u3092\u8a87\u308b\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306eJS\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3042\u308bReact.js\u3092\u30d9\u30fc\u30b9\u306b\u3057\u3066\u3044\u308b\u3053\u3068\u3082\u3042\u308a\u3001\u5143\u3005React.js\u3092\u4f7f\u3063\u3066\u3044\u305f\u30a8\u30f3\u30b8\u30cb\u30a2\u306b\u3068\u3063\u3066\u306f\u30cf\u30fc\u30c9\u30eb\u304c\u4f4e\u3044<\/span>\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3068\u8a00\u3048\u307e\u3059\u3002\uff08Next.js\u81ea\u4f53\u3082\u3001\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u306f\u9ad8\u3044\u30b7\u30a7\u30a2\u7387\u3092\u8a87\u3063\u3066\u3044\u307e\u3059<\/a>\uff09<\/p>\n\n\n

supabase\u3068\u306f\uff1f<\/h2>\n\n\n

supabase\u306f\u3001RDB\uff08postgresql\uff09\u304c\u4f7f\u3048\u308bBaaS<\/span>\uff08Backend as a Service\uff09\u3068\u306a\u3063\u3066\u304a\u308a\u3001\u30c7\u30fc\u30bf\u66f4\u65b0\u3068\u540c\u6642\u306b\u753b\u9762\u3082\u5909\u66f4\u3059\u308b\u306a\u3069\u304c\u7c21\u5358\u306b\u884c\u3048\u308b\u3068\u3044\u3046\u7279\u5fb4\u3082\u3042\u308a\u3001\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306e\u30b5\u30fc\u30d3\u30b9\u306b\u3088\u304f\u4f7f\u308f\u308c\u3066\u3044\u308b<\/span>\u3088\u3046\u3067\u3059\u3002<\/p>\n

BaaS\u3068\u306f\u3001\u57fa\u672c\u7684\u306b\u63d0\u4f9b\u3057\u3066\u3044\u308b\u4f1a\u793e\u306e\u30af\u30e9\u30a6\u30c9\u306b\u30c7\u30fc\u30bf\u304c\u3042\u308a\u3001\u305d\u3053\u3068\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30fc\u30d0\u30fc\u9593\u3067\u901a\u4fe1\u3092\u3057\u3066\u30c7\u30fc\u30bf\u3092\u3084\u308a\u53d6\u308a\u3059\u308b\u30b5\u30fc\u30d3\u30b9\u3067\u3042\u308a\u3001\u901a\u5e38\u306f\u6709\u6599\u3067\u3059\u3002<\/p>\n

supabase\u3082\u3001\u57fa\u672c\u6709\u6599\u3067\u3059\u304c\u3001\u6a5f\u80fd\u5236\u9650\u4ed8\u304d\u306e\u7121\u6599\u30d7\u30e9\u30f3\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n

\u3057\u304b\u3057\u3001supabase\u81ea\u4f53\u3092\u30ed\u30fc\u30ab\u30eb\u306b\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b\u3053\u3068\u3067\u3001\u5b8c\u5168\u7121\u6599<\/strong>\u3067\u5229\u7528\u3059\u308b\u65b9\u6cd5\u3082\u3042\u308a\u3001\u4eca\u56de\u306f\u305d\u3061\u3089\u3092\u4f7f\u3063\u3066\u69cb\u7bc9\u3092\u9032\u3081\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n

supabase\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n\n\n

\u4eca\u56de\u306f\u3001\u30bf\u30a4\u30c8\u30eb\u306b\u3082\u3042\u308b\u3068\u304a\u308a\u3001\u5b8c\u5168\u7121\u6599\u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u7248\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n

\u3053\u3053\u3067\u306f\u8a18\u4e8b\u304c\u5c11\u3057\u9577\u304f\u306a\u308b\u306e\u3067\u3001\u5225\u306e\u8a18\u4e8b\u3067supabase\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u624b\u9806\u3092\u8a18\u8f09\u3057\u3066\u3044\u307e\u3059\u306e\u3067\u3001\u307e\u305a\u306f\u4ee5\u4e0b\u306e\u8a18\u4e8b\u306e\u624b\u9806\u3067supabase\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u3044\u305f\u3060\u3051\u305f\u3089\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n

https:\/\/katblog.manadream.net\/index.php\/2022\/07\/07\/supabase-local\/<\/p>\n\n\n

\u5fc5\u8981\u306a\u30c6\u30fc\u30d6\u30eb\u306a\u3069\u4f5c\u6210<\/h2>\n\n\n

supabase\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u304c\u5b8c\u4e86\u3057\u305f\u3089\u3001supabase\u306eDB\uff08postgresql\uff09\u306b\u30ed\u30b0\u30a4\u30f3\u3057\u3001\u4ee5\u4e0b\u306eSQL\u3092\u5b9f\u884c\u3057\u3066\u5fc5\u8981\u306a\u30c6\u30fc\u30d6\u30eb\u306a\u3069\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n

\n-- Create a table for public "profiles"\ncreate table public.profiles (\n  id uuid references auth.users not null,\n  updated_at timestamp with time zone,\n  username text unique,\n  avatar_url text,\n\n  primary key (id),\n  unique(username)\n);\n\nalter table public.profiles enable row level security;\n\ncreate policy "Public profiles are viewable by everyone."\n  on public.profiles for select\n  using ( true );\n\ncreate policy "Users can insert their own profile."\n  on public.profiles for insert\n  with check ( auth.uid() = id );\n\ncreate policy "Users can update own profile."\n  on public.profiles for update\n  using ( auth.uid() = id );\n\n-- Set up Realtime!\nbegin;\n  drop publication if exists supabase_realtime;\n  create publication supabase_realtime;\ncommit;\nalter publication supabase_realtime add table profiles;\n\n-- Set up Storage!\ninsert into storage.buckets (id, name)\nvalues ('avatars', 'avatars');\n\ncreate policy "Avatar images are publicly accessible."\n  on storage.objects for select\n  using ( bucket_id = 'avatars' );\n\ncreate policy "Anyone can upload an avatar."\n  on storage.objects for insert\n  with check ( bucket_id = 'avatars' );\n<\/pre><\/div>\n\n\n
Next.js\u69cb\u7bc9<\/h2>\n\n\n
supabase\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3068\u30c6\u30fc\u30d6\u30eb\u306e\u4f5c\u6210\u304c\u5b8c\u4e86\u3057\u305f\u3089\u3001\u6b21\u306bNext.js\u306e\u74b0\u5883\u3092\u4f5c\u3063\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n
Next.js\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210<\/h3>\n\n\n
\u307e\u305a\u306f\u3001\u4e0b\u8a18\u306e\u30b3\u30de\u30f3\u30c9\u3067Next.js\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n
\n$ npx create-next-app {\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d}\n<\/pre><\/div>\n\n
{\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d}\u306e\u90e8\u5206\u306f\u4efb\u610f\u306e\u6587\u5b57\u5217\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
\u4f8b\u3048\u3070\u300csupabase-nextjs\u300d\u3068\u3044\u3046\u540d\u524d\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u3057\u305f\u3044\u5834\u5408\u306f\u3001<\/p>\n\n
\n$ npx create-next-app supabase-nextjs\n<\/pre><\/div>\n\n
\u3068\u3057\u307e\u3059\u3002\uff08\u4ee5\u5f8c\u3001\u4e0a\u8a18\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\u3067\u4f5c\u6210\u3057\u305f\u524d\u63d0\u3067\u30b3\u30de\u30f3\u30c9\u3092\u8a18\u8f09\u3057\u3066\u3044\u304d\u307e\u3059\u304c\u3001\u5225\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\u306b\u3057\u305f\u5834\u5408\u306f\u9069\u5b9c\u8aad\u307f\u66ff\u3048\u3066\u304f\u3060\u3055\u3044\uff09<\/p>\n\n\n
supabase\u3068\u306e\u9023\u643a\u8a2d\u5b9a<\/h3>\n\n\n
\u6b21\u306b\u3001Next.js\u3068supabase\u3092\u63a5\u7d9a\u3059\u308b\u305f\u3081\u306e\u8a2d\u5b9a\u3092\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n
\u307e\u305a\u306f\u5148\u307b\u3069\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\u3067\u4f5c\u6210\u3055\u308c\u305f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\u306e\u30d5\u30a9\u30eb\u30c0\u306b\u79fb\u52d5\u3057\u3001\u5fc5\u8981\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n\n
\n$ cd supabase-nextjs    \u2190 \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30d5\u30a9\u30eb\u30c0\u306b\u79fb\u52d5\n$ npm install @supabase\/supabase-js\n<\/pre><\/div>\n\n
\u6b21\u306b\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30d5\u30a9\u30eb\u30c0\u5185\u306e.env.local\u30d5\u30a1\u30a4\u30eb\u3092\u66f8\u304d\u63db\u3048\u3066\u3044\u304d\u307e\u3059\u3002\uff08\u30d5\u30a1\u30a4\u30eb\u304c\u306a\u3044\u5834\u5408\u306f\u65b0\u898f\u4f5c\u6210\u3057\u307e\u3059\u3002\uff09<\/p>\n\n
\n# \u30d5\u30a1\u30a4\u30eb\u304c\u306a\u3044\u5834\u5408\ntouch .env.local\n\n# \u30d5\u30a1\u30a4\u30eb\u3092\u958b\u304f\nvi .env.local\n\n# \u4e0b\u8a18\u3092\u8a18\u8f09\u3059\u308b\nNEXT_PUBLIC_SUPABASE_URL={supabase\u306eURL}\nNEXT_PUBLIC_SUPABASE_ANON_KEY={supabase\u306eANON_KEY}\n<\/pre><\/div>\n\n
supabase\u306eURL\u3068ANON_KEY\u306b\u3064\u3044\u3066\u306f\u3001supabase\u69cb\u7bc9\u6642\u306b\u4f5c\u6210\u3057\u305fsupabase\u30d5\u30a9\u30eb\u30c0\u5185\u306e\u3001.supabase\/docker\/docker-compose.yml\u306e\u3001\u4e0b\u8a18\u306e\u884c\u306b\u8a18\u8f09\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n
\n# 23\u884c\u76ee\u3042\u305f\u308a\nAPI_EXTERNAL_URL: http:\/\/{\u8a2d\u5b9a\u3057\u305fIP or \u30c9\u30e1\u30a4\u30f3}:8000    \u2190 supabase\u306eURL\n\n# 82\u884c\u76ee\u3042\u305f\u308a\nANON_KEY: {\u30e9\u30f3\u30c0\u30e0\u306a\u6587\u5b57\u5217}    \u2190 supabase\u306eANON_KEY\n<\/pre><\/div>\n\n\n
\u52d5\u4f5c\u78ba\u8a8d\u7528\u306e\u8a8d\u8a3c\u30da\u30fc\u30b8\u4f5c\u6210<\/h3>\n\n\n
\u3046\u307e\u304f\u9023\u643a\u3067\u304d\u3066\u3044\u308b\u304b\u78ba\u8a8d\u3059\u308b\u305f\u3081\u3001\u5b9f\u969b\u306b\u7c21\u5358\u306a\u8a8d\u8a3c\u30da\u30fc\u30b8\u3092\u4f5c\u3063\u3066\u307f\u307e\u3059\u3002<\/p>\n
\u4e0b\u8a18\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u5168\u3066\u30b3\u30d4\u30da\u3057\u3066\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n
\u25a0utils\/supabaseClient.js<\/p>\n\n
\nimport { createClient } from '@supabase\/supabase-js'\n\nconst supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL\nconst supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY\n\nexport const supabase = createClient(supabaseUrl, supabaseAnonKey)\n<\/pre><\/div>\n\n
\u25a0components\/Auth.js<\/p>\n\n
\nimport { useState } from 'react'\nimport { supabase } from '..\/utils\/supabaseClient'\n\nexport default function Auth() {\n  const [loading, setLoading] = useState(false)\n  const [email, setEmail] = useState('')\n\n  const handleLogin = async (email) => {\n    try {\n      setLoading(true)\n      const { error } = await supabase.auth.signIn({ email })\n      if (error) throw error\n      alert('Check your email for the login link!')\n    } catch (error) {\n      alert(error.error_description || error.message)\n    } finally {\n      setLoading(false)\n    }\n  }\n\n  return (\n    <div className="row flex flex-center">\n      <div className="col-6 form-widget">\n        <h1 className="header">Supabase + Next.js<\/h1>\n        <p className="description">Sign in via magic link with your email below<\/p>\n        <div>\n          <input\n            className="inputField"\n            type="email"\n            placeholder="Your email"\n            value={email}\n            onChange={(e) => setEmail(e.target.value)}\n          \/>\n        <\/div>\n        <div>\n          <button\n            onClick={(e) => {\n              e.preventDefault()\n              handleLogin(email)\n            }}\n            className="button block"\n            disabled={loading}\n          >\n            <span>{loading ? 'Loading' : 'Send magic link'}<\/span>\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  )\n}\n<\/pre><\/div>\n\n
\u25a0components\/Account.js<\/p>\n\n
\nimport { useState, useEffect } from 'react'\nimport { supabase } from '..\/utils\/supabaseClient'\n\nexport default function Account({ session }) {\n  const [loading, setLoading] = useState(true)\n  const [username, setUsername] = useState(null)\n  const [website, setWebsite] = useState(null)\n  const [avatar_url, setAvatarUrl] = useState(null)\n\n  useEffect(() => {\n    getProfile()\n  }, [session])\n\n  async function getProfile() {\n    try {\n      setLoading(true)\n      const user = supabase.auth.user()\n\n      let { data, error, status } = await supabase\n        .from('profiles')\n        .select(`username, website, avatar_url`)\n        .eq('id', user.id)\n        .single()\n\n      if (error && status !== 406) {\n        throw error\n      }\n\n      if (data) {\n        setUsername(data.username)\n        setWebsite(data.website)\n        setAvatarUrl(data.avatar_url)\n      }\n    } catch (error) {\n      alert(error.message)\n    } finally {\n      setLoading(false)\n    }\n  }\n\n  async function updateProfile({ username, website, avatar_url }) {\n    try {\n      setLoading(true)\n      const user = supabase.auth.user()\n\n      const updates = {\n        id: user.id,\n        username,\n        website,\n        avatar_url,\n        updated_at: new Date(),\n      }\n\n      let { error } = await supabase.from('profiles').upsert(updates, {\n        returning: 'minimal', \/\/ Don't return the value after inserting\n      })\n\n      if (error) {\n        throw error\n      }\n    } catch (error) {\n      alert(error.message)\n    } finally {\n      setLoading(false)\n    }\n  }\n\n  return (\n    <div className="form-widget">\n      <div>\n        <label htmlFor="email">Email<\/label>\n        <input id="email" type="text" value={session.user.email} disabled \/>\n      <\/div>\n      <div>\n        <label htmlFor="username">Name<\/label>\n        <input\n          id="username"\n          type="text"\n          value={username || ''}\n          onChange={(e) => setUsername(e.target.value)}\n        \/>\n      <\/div>\n      <div>\n        <label htmlFor="website">Website<\/label>\n        <input\n          id="website"\n          type="website"\n          value={website || ''}\n          onChange={(e) => setWebsite(e.target.value)}\n        \/>\n      <\/div>\n\n      <div>\n        <button\n          className="button block primary"\n          onClick={() => updateProfile({ username, website, avatar_url })}\n          disabled={loading}\n        >\n          {loading ? 'Loading ...' : 'Update'}\n        <\/button>\n      <\/div>\n\n      <div>\n        <button className="button block" onClick={() => supabase.auth.signOut()}>\n          Sign Out\n        <\/button>\n      <\/div>\n    <\/div>\n  )\n}\n\n<\/pre><\/div>\n\n
\u25a0pages\/index.js\uff08\u4e0a\u66f8\u304d\uff09<\/p>\n\n
\nimport { useState, useEffect } from 'react'\nimport { supabase } from '..\/utils\/supabaseClient'\nimport Auth from '..\/components\/Auth'\nimport Account from '..\/components\/Account'\n\nexport default function Home() {\n  const [session, setSession] = useState(null)\n\n  useEffect(() => {\n    setSession(supabase.auth.session())\n\n    supabase.auth.onAuthStateChange((_event, session) => {\n      setSession(session)\n    })\n  }, [])\n\n  return (\n    <div className="container" style={{ padding: '50px 0 100px 0' }}>\n      {!session ? <Auth \/> : <Account key={session.user.id} session={session} \/>}\n    <\/div>\n  )\n}\n<\/pre><\/div>\n\n\n
Next.js\u8d77\u52d5<\/h3>\n\n\n
\u30d5\u30a1\u30a4\u30eb\u306e\u4f5c\u6210\u3001\u7de8\u96c6\u304c\u5b8c\u4e86\u3057\u305f\u3089\u3001Next.js\u3092\u4e0b\u8a18\u306e\u30b3\u30de\u30f3\u30c9\u3067\u8d77\u52d5\u3057\u307e\u3059\u3002<\/p>\n\n
\n$ npm run dev\n<\/pre><\/div>\n\n
http:\/\/{\u30b5\u30fc\u30d0\u30fc\u306e\u30c9\u30e1\u30a4\u30f3}:3000 \u306b\u30a2\u30af\u30bb\u30b9\u3057\u307e\u3059\u3002<\/p>\n
\u203b\u30b5\u30fc\u30d0\u30fc\u306e\u30c9\u30e1\u30a4\u30f3\u306f\u3001next.js\u3092\u7acb\u3061\u4e0a\u3052\u305f\u30b5\u30fc\u30d0\u30fc\u306e\u30c9\u30e1\u30a4\u30f3\u3084IP\u30a2\u30c9\u30ec\u30b9\u306b\u306a\u308a\u307e\u3059\uff08localhost\u3084192.168.33.10\u306a\u3069\uff09<\/p>\n
\u4e0b\u8a18\u306e\u3088\u3046\u306a\u8868\u793a\u304c\u3055\u308c\u308c\u3070OK\u3067\u3059\u3002<\/p>\n
\"\"<\/p>\n
\u3053\u3053\u3067\u4ee5\u4e0b\u306e\u753b\u50cf\u306e\u3088\u3046\u306b\u300c\u3053\u306e\u30b5\u30a4\u30c8\u306b\u30a2\u30af\u30bb\u30b9\u3067\u304d\u307e\u305b\u3093\u300d\u3068\u3044\u3063\u305f\u30a8\u30e9\u30fc\u306b\u306a\u308b\u5834\u5408\u306f\u3001\u30d5\u30a1\u30a4\u30a2\u30d5\u30a9\u30fc\u30eb\u306e\u8a2d\u5b9a\u304c\u5fc5\u8981\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n
\"\"<\/p>\n
\u305d\u306e\u5834\u5408\u306f\u3001\u30d5\u30a1\u30a4\u30a2\u30d5\u30a9\u30fc\u30eb\u30673000\u756a\u30dd\u30fc\u30c8\u3092\u8a31\u53ef\u3057\u3066\u3042\u3052\u308b\u5fc5\u8981\u304c\u3042\u308b\u305f\u3081\u3001\u4e0b\u8a18\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n\n
\n$ ufw allow 3000\n$ ufw reload\n<\/pre><\/div>\n\n\n
\u52d5\u4f5c\u78ba\u8a8d<\/h2>\n\n\n
\u305d\u308c\u3067\u306f\u3046\u307e\u304fNext.js\u3068Supabase\u304c\u9023\u643a\u3067\u304d\u3066\u3044\u308b\u304b\u78ba\u8a8d\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n
\u30ed\u30b0\u30a4\u30f3\u30e1\u30fc\u30eb\u9001\u4fe1<\/h3>\n\n\n
\u307e\u305a\u306fYour email\u306e\u6b04\u306b\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u3092\u5165\u529b\u3057\u307e\u3059\u3002<\/p>\n
\u305d\u3057\u3066\u300cSend magic link\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002\uff08\u30e1\u30fc\u30eb\u81ea\u4f53\u306f\u5f8c\u8ff0\u3059\u308b\u3001supabase\u4ed8\u5c5e\u306e\u30c6\u30b9\u30c8\u7528\u30e1\u30fc\u30eb\u30b5\u30fc\u30d0\u30fc\u306b\u9001\u4fe1\u3055\u308c\u308b\u305f\u3081\u3001\u5b9f\u969b\u306egmail\u306a\u3069\u306b\u306f\u9001\u4fe1\u3055\u308c\u307e\u305b\u3093\uff09<\/p>\n
\"\"<\/p>\n
\u3053\u3053\u3067\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u300cRequest Failed\u300d\u3068\u8868\u793a\u3055\u308c\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
\"\"<\/p>\n
\u305d\u306e\u5834\u5408\u306f\u3001supabase\u304c\u7acb\u3061\u4e0a\u304c\u3063\u3066\u3044\u306a\u3044\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u306e\u3067\u3001supabase\u3092\u69cb\u7bc9\u3057\u305f\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\u3057\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066supabase\u3092\u7acb\u3061\u4e0a\u3052\u307e\u3059\u3002<\/p>\n\n
\n$ cd \/var\/www\/supabase  \u2190supabase\u3092\u69cb\u7bc9\u3057\u305f\u969b\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\n$ supabase start\n<\/pre><\/div>\n\n
\u4e0a\u8a18\u3092\u5b9f\u65bd\u3057\u3066\u3082\u3046\u307e\u304f\u3044\u304b\u306a\u3044\u5834\u5408\u306f\u3001Next.js\u306e.env.local\u306eNEXT_PUBLIC_SUPABASE_URL\u306e\u30c9\u30e1\u30a4\u30f3\uff08IP\u30a2\u30c9\u30ec\u30b9\uff09\u304c\u9593\u9055\u3048\u3066\u3044\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u306e\u3067\u3001\u518d\u5ea6\u3001\u30b5\u30fc\u30d0\u30fc\u306e\u3082\u306e\u3068\u4e00\u81f4\u3057\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u78ba\u8a8d\u3057\u3066\u898b\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n
\u30e1\u30fc\u30eb\u78ba\u8a8d<\/h3>\n\n\n
\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u8a2d\u5b9a\u3067\u306f\u3001\u30e1\u30fc\u30eb\u306fgmail\u306a\u3069\u3067\u306f\u306a\u304f\u3001supabase\u306b\u4ed8\u5c5e\u3059\u308b\u30e1\u30fc\u30eb\u30b5\u30fc\u30d0\u30fc\u306b\u9001\u4fe1\u3055\u308c\u307e\u3059\u3002<\/p>\n
\u4ee5\u4e0b\u306eURL\u3092\u30d6\u30e9\u30a6\u30b6\u3067\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n
http:\/\/{\u30b5\u30fc\u30d0\u30fc\u306e\u30c9\u30e1\u30a4\u30f3}:9000<\/p>\n
\u203b\u30b5\u30fc\u30d0\u30fc\u306e\u30c9\u30e1\u30a4\u30f3\u306fNext.js\u306e\u753b\u9762\u3092\u8868\u793a\u3057\u305f\u969b\u3068\u540c\u69d8\u3067\u3059\u3002<\/p>\n
\u3059\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n
\"\"<\/p>\n
\u8868\u793a\u3055\u308c\u305f\u3089\u3001\u753b\u9762\u4e0a\u90e8\u306b\u3042\u308b\u300cMonitor\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u3001\u8a72\u5f53\u306e\u30e1\u30fc\u30eb\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<\/p>\n
\u3059\u308b\u3068\u30e1\u30fc\u30eb\u306e\u5185\u5bb9\u304c\u8868\u793a\u3055\u308c\u308b\u306e\u3067\u3001\u30e1\u30fc\u30eb\u5185\u306e\u300cConfirm your email address\u300d\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<\/p>\n
\"\"<\/p>\n
\u4e0b\u8a18\u306e\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u308b\u306e\u3067\u300cName\u300d\u306b\u9069\u5f53\u306b\u5165\u529b\u3057\u3066\u300cUpdate\u300d\u30dc\u30bf\u30f3\u3092\u62bc\u4e0b\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n
\"\"<\/p>\n
profiles\u30c6\u30fc\u30d6\u30eb\u306eusername\u30ab\u30e9\u30e0\u306b\u3001\u5165\u529b\u3055\u308c\u305f\u5024\u304c\u767b\u9332\u3055\u308c\u3066\u3044\u308c\u3070\u3001\u52d5\u4f5c\u78ba\u8a8d\u306f\u5b8c\u4e86\u3067\u3059\u3002<\/p>\n
\"\"<\/p>\n
\u3082\u3057\u3001\u30e1\u30fc\u30eb\u306b\u8a18\u8f09\u306e\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u3082\u30da\u30fc\u30b8\u306b\u9077\u79fb\u3067\u304d\u306a\u3044\u5834\u5408\u306f\u3001supabase\u306e\u300c.supabase\/docker\/docker-compose.yml\u300d\u30d5\u30a1\u30a4\u30eb\u306e\u4ee5\u4e0b\u306e\u7b87\u6240\u306e\u8a2d\u5b9a\u304c\u9593\u9055\u3063\u3066\u3044\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u306e\u3067\u3001\u518d\u5ea6\u78ba\u8a8d\u3057\u3066\u3044\u305f\u3060\u3051\u305f\u3089\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n
<\/p>\n\n
\nAPI_EXTERNAL_URL: http:\/\/{\u30c9\u30e1\u30a4\u30f3 or IP\u30a2\u30c9\u30ec\u30b9}:8000\nGOTRUE_SITE_URL: http:\/\/{\u30c9\u30e1\u30a4\u30f3 or IP\u30a2\u30c9\u30ec\u30b9}:8000\n<\/pre><\/div>\n\n\n
\u6700\u5f8c\u306b<\/h2>\n\n\n
\u3044\u304b\u304c\u3060\u3063\u305f\u3067\u3057\u3087\u3046\u304b\uff1f<\/p>\n
\u591a\u5c11\u3084\u308b\u3053\u3068\u306f\u591a\u304b\u3063\u305f\u304b\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u79c1\u3082\u5168\u90e8\u5408\u308f\u305b\u306620\u5206\u307b\u3069\u3067\u7d42\u308f\u308a\u307e\u3057\u305f\u306e\u3067\u3001\u96e3\u3057\u304f\u306f\u306a\u3044\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n
\u4eca\u56de\u306fsupabase\u306b\u95a2\u3057\u3066\u306f\u3001DB\u306b\u767b\u9332\u3001\u53c2\u7167\u3059\u308b\u304f\u3089\u3044\u3057\u304b\u4f7f\u3044\u307e\u305b\u3093\u3067\u3057\u305f\u304c\u3001\u4eca\u5f8c\u3001\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30b5\u30fc\u30d3\u30b9\u306a\u3069\u3082\u4f5c\u3063\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n
\u4ee5\u4e0a\u3001\u300cNext.js + supabase\uff08\u5b8c\u5168\u7121\u6599\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u7248\uff09\u74b0\u5883\u69cb\u7bc9\uff01\u300d\u3067\u3057\u305f\u301c<\/p>\n\n\n
\u53c2\u8003<\/h3>\n\n\n
https:\/\/kohsuk.tech\/2021\/8\/24\/<\/a><\/p>\n
https:\/\/supabase.com\/docs\/guides\/with-nextjs<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u3069\u3046\u3082\u3001kat\u3067\u3059\u3002 \u4eca\u56de\u306f\u3001Next.js\u3068supabase\uff08\u30ed\u30fc\u30ab\u30eb\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u7248\uff09\u3092\u4f7f\u3063\u305f\u958b\u767a\u74b0\u5883\u306e\u69cb\u7bc9\u3092\u884c\u3063\u3066\u3044\u304d\u307e\u3059\uff01 \u30a8\u30e9\u30fc\u304c\u51fa\u305f\u5834\u5408\u306e\u5bfe\u51e6\u6cd5\u306b\u3064\u3044\u3066\u3082\u66f8\u3044\u3066\u3044\u304d\u307e\u3059\u306e\u3067\u3001\u305c\u3072\u53c2\u8003\u306b\u3057\u3066\u3044\u305f\u3060\u3051\u305f\u3089\u3068\u601d\u3044\u307e\u3059<\/p>\n","protected":false},"author":1,"featured_media":5210,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_locale":"ja","_original_post":"https:\/\/katblog.manadream.net\/?p=5170","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[3,136],"tags":[148,147,137,149],"class_list":["post-5170","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-node_js","category-supabase","tag-nextjs","tag-nodejs","tag-supabase","tag-149","ja"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/katblog.manadream.net\/wp-content\/uploads\/2022\/07\/N.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paUgnN-1lo","_links":{"self":[{"href":"https:\/\/katblog.manadream.net\/index.php\/wp-json\/wp\/v2\/posts\/5170"}],"collection":[{"href":"https:\/\/katblog.manadream.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/katblog.manadream.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/katblog.manadream.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/katblog.manadream.net\/index.php\/wp-json\/wp\/v2\/comments?post=5170"}],"version-history":[{"count":23,"href":"https:\/\/katblog.manadream.net\/index.php\/wp-json\/wp\/v2\/posts\/5170\/revisions"}],"predecessor-version":[{"id":5209,"href":"https:\/\/katblog.manadream.net\/index.php\/wp-json\/wp\/v2\/posts\/5170\/revisions\/5209"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/katblog.manadream.net\/index.php\/wp-json\/wp\/v2\/media\/5210"}],"wp:attachment":[{"href":"https:\/\/katblog.manadream.net\/index.php\/wp-json\/wp\/v2\/media?parent=5170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/katblog.manadream.net\/index.php\/wp-json\/wp\/v2\/categories?post=5170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/katblog.manadream.net\/index.php\/wp-json\/wp\/v2\/tags?post=5170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}