update several articles for next 14

Signed-off-by: Vu Van Dung <me@joulev.dev>

app/[...slug]/not-found.tsx

@@ -1 +1,25 @@
-export { default } from "next-docs-ui/not-found";
+import { MDXContent } from "next-docs-ui/mdx";
+import { DocsPage } from "next-docs-ui/page";
+
+export default function NotFound() {
+  return (
+    <DocsPage>
+      <MDXContent>
+        <h1>404 Not Found</h1>
+        <p>
+          You reached the 404 page. It could mean the URL has a typo, or the page used to exist but
+          is no longer available.
+        </p>
+        <p>
+          If this page used to exist but has been removed (without a redirection), it is because the
+          page content is no longer applicable with the current Next.js version and is no longer
+          important. Next.js changes fast, so naturally over time many articles become outdated.
+        </p>
+        <p>
+          If you mistyped the URL, please recheck and try again. If the URL is correct and the page
+          is removed, time to go back to coding.
+        </p>
+      </MDXContent>
+    </DocsPage>
+  );
+}

app/layout.tsx

@@ -19,7 +19,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           <DocsLayout
             tree={tree}
             nav={{
-              title: "Next.js Discord Common Questions",
+              title: <>FAQ for the Next.js Discord&nbsp;server</>,
               githubUrl: "https://github.com/joulev/nextjs-faq",
             }}
           >

content/docs/fetch-api-in-rsc.mdx

@@ -1,5 +1,5 @@
 ---
-updated: 2023-06-14
+updated: 2023-10-28
 title: Fetching own API endpoint in React Server Components
 authors: [joulev]
 ---
@@ -33,7 +33,7 @@ If you worry about authentication or similar stuff, [`cookies`](https://nextjs.o
 
 Route handlers should be instead used for client-side fetching, interactions with other services/applications, etc. If you find yourself repeating code in both the server component and the route handler, you can extract the common code into a separate utility function (say, `getUser(id: number): User | null`) and import it in both places.
 
-Of course, this only applies to server components. In client components, you can fetch your own route handlers normally with `swr` or `react-query` (see also <Question id="when-client-component-in-app-router" />).
+Of course, this only applies to server components. In client components, you can fetch your own route handlers normally with `swr` or `react-query` (see also <Question id="when-client-component-in-app-router" />). That being said, we recommend you to use [server actions](https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations) for mutations, because it integrates very nicely with the React router used by the `app` directory.
 
 Now read on to see why `fetch`-ing route handlers in server components is a bad idea.
 
@@ -49,12 +49,6 @@ It requires the server to be running at (in the example above) `localhost:3000`.
 
 For communicating with a separate backend service (`api.yourapp.com`) or a third-party API (`api.thirdparty.com`).
 
-## Why does the official playground use normal `fetch` then? Why does it work there?
-
-Since the "backend" of [the official playground](https://github.com/vercel/app-playground) is just static data, if the playground follows the approach above, it would just be them importing static JS objects, which doesn't have high educational value in terms of demonstrating how the `app` router works. That's why they have to use `fetch`. This is just a special case.
-
-And if you notice very carefully, they are actually fetching the current deployment during build, not the new server with newly updated route handler code. It counts as a separate backend service, that's why it works.
-
 ## What are the drawbacks of the approach?
 
 The most evident drawback of the approach is that it doesn't work (see above). But what if it _did_ work, or what if you only use it in the limited scenarios where it does work? What are the drawbacks then?

content/docs/metadata-client-components.mdx

@@ -1,12 +1,12 @@
 ---
-updated: 2023-08-18
+updated: 2023-10-28
 title: How to set metadata to page.tsx rendered as client components?
 authors: [joulev]
 ---
 
 > [The `export const metadata` syntax](https://nextjs.org/docs/app/api-reference/functions/generate-metadata) seems to not work if `page.tsx` is a client component. How do I set my page title and other metadata then?
 
-The `metadata` object and `generateMetadata` function exports are only supported in server components. Hence, you need to make your page a server component to use them. A method to do that is to move all your client-side logic to a separate client component and import that client component to the now-server component `page.tsx`. So instead of
+The `metadata`, `generateMetadata`, `viewport` and `generateViewport` exports are only supported in server components. Hence, you need to make your page a server component to use them. A method to do that is to move all your client-side logic to a separate client component and import that client component to the now-server component `page.tsx`. So instead of
 
 ```tsx
 // page.tsx