Add Redirect An Unauthorized User as a Next.js TIL

nextjs/redirect-an-unauthorized-user.md

@@ -0,0 +1,50 @@
+# Redirect An Unauthorized User
+
+With the Page Router in earlier next version, we could do a server-side
+authorization check in `getServerSideProps` and then return a
+[`redirect`](https://nextjs.org/docs/pages/api-reference/functions/get-server-side-props#redirect)
+response in order to redirect the user to a page they are authorized for.
+
+That might look something like this:
+
+```javascript
+export async function getServerSideProps(context) {
+  const session = await getServerAuthSession()
+  const ability = getAbility({user: session?.user})
+
+  if (!ability.can('create', 'Post')) {
+    return {
+      redirect: {
+        destination: '/posts',
+        permanent: false,
+      },
+    }
+  }
+ 
+  return {
+    props: {},
+  }
+}
+```
+
+We can achieve the same thing with the App Router, but with a bit less code.
+The `next/navigation` package has a [`redirect`
+function](https://nextjs.org/docs/app/api-reference/functions/redirect) that we
+can invoke directly in a component. This will redirect the user instead of
+rendering the component to HTML.
+
+```javascript
+import { redirect } from 'next/navigation'
+
+export default async function CreatePost() {
+  const session = await getServerAuthSession()
+  const ability = getAbility({user: session?.user})
+
+  if (!ability.can('create', 'Post')) {
+    redirect('/posts')
+  }
+
+  // JSX follows
+  return (...)
+}
+```