feat: Add useMessages for convenience and restructure docs to be Ap…

…p Router-first (#345)

docs/components/Chip.tsx

@@ -0,0 +1,27 @@
+import clsx from 'clsx';
+import {ReactNode} from 'react';
+
+type Props = {
+  children: ReactNode;
+  className?: string;
+  color?: 'green' | 'yellow';
+};
+
+export default function Chip({children, className, color = 'green'}: Props) {
+  return (
+    <span
+      className={clsx(
+        className,
+        'inline-block rounded-md px-[6px] py-[2px] text-xs font-semibold uppercase tracking-wider',
+        {
+          green:
+            'bg-green-100 text-green-800 dark:bg-green-800/50 dark:text-green-100',
+          yellow:
+            'bg-yellow-100 text-orange-800 dark:bg-yellow-800/50 dark:text-yellow-100'
+        }[color]
+      )}
+    >
+      {children}
+    </span>
+  );
+}

docs/components/CommunityLink.tsx

@@ -1,6 +1,6 @@
-import clsx from 'clsx';
 import Link from 'next/link';
 import {ComponentProps} from 'react';
+import Chip from './Chip';
 
 type Props = Omit<ComponentProps<typeof Link>, 'children'> & {
   date: string;
@@ -17,28 +17,23 @@ export default function CommunityLink({
   ...rest
 }: Props) {
   return (
-    <Link className="block py-2" {...rest}>
-      <p className="text-xl font-semibold">{title}</p>
-      <div className="mt-2">
-        {type && (
-          <p
-            className={clsx(
-              'mr-2 inline-block rounded-sm px-2 py-1 text-sm font-semibold',
-              {
-                article:
-                  'bg-green-100 text-green-800 dark:bg-green-800/50 dark:text-green-100',
-                video:
-                  'bg-yellow-100 text-yellow-800 dark:bg-yellow-800/50 dark:text-yellow-100'
-              }[type]
-            )}
-          >
-            {{article: 'Article', video: 'Video'}[type]}
-          </p>
-        )}
-        <p className="inline-block text-base text-slate-500">{date}</p>
-        <p className="inline-block text-base text-slate-500">{' ・ '}</p>
-        <p className="inline-block text-base text-slate-500">{author}</p>
-      </div>
-    </Link>
+    <div>
+      <Link className="inline-block py-2" {...rest}>
+        <p className="text-xl font-semibold">{title}</p>
+        <div className="mt-2">
+          {type && (
+            <Chip
+              className="mr-2 -translate-y-[1px]"
+              color={({article: 'green', video: 'yellow'} as const)[type]}
+            >
+              {{article: 'Article', video: 'Video'}[type]}
+            </Chip>
+          )}
+          <p className="inline-block text-base text-slate-500">{date}</p>
+          <p className="inline-block text-base text-slate-500">{' ・ '}</p>
+          <p className="inline-block text-base text-slate-500">{author}</p>
+        </div>
+      </Link>
+    </div>
   );
 }

docs/components/Hero.tsx

@@ -47,7 +47,7 @@ export default function Hero({
               </div>
               <Link
                 className="mt-10 inline-flex border border-green-300/50 px-4 py-2 font-semibold text-green-300 transition-colors hover:border-white/50 hover:text-white lg:mt-20"
-                href="/docs/next-13"
+                href="/docs"
               >
                 <span className="mr-3 inline-block">📣</span>{' '}
                 <span>{rscAnnouncement}</span>

docs/components/Section.tsx

@@ -17,7 +17,7 @@ export default function Section({children, description, title}: Props) {
             <h2 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white lg:text-4xl">
               {title}
             </h2>
-            <div className="mt-6 max-w-2xl text-base text-slate-600 dark:text-slate-400 lg:mx-auto lg:text-lg">
+            <div className="mt-6 max-w-[38rem] text-base text-slate-600 dark:text-slate-400 lg:mx-auto lg:text-lg">
               {description}
             </div>
           </div>

docs/components/VersionTabs.tsx

@@ -0,0 +1,31 @@
+import {Tabs} from 'nextra-theme-docs';
+import {ReactNode} from 'react';
+import Chip from './Chip';
+
+type Props = {
+  children: ReactNode;
+  defaultLabel?: ReactNode;
+  rscLabel?: ReactNode;
+};
+
+export default function VersionTabs({
+  children,
+  defaultLabel = 'Default',
+  rscLabel = 'Server Components'
+}: Props) {
+  return (
+    <Tabs
+      items={[
+        defaultLabel,
+        <span key="2" className="inline-flex items-center">
+          <span>{rscLabel}</span>
+          <Chip className="ml-2" color="yellow">
+            Beta
+          </Chip>
+        </span>
+      ]}
+    >
+      {children}
+    </Tabs>
+  );
+}

docs/next.config.js

@@ -16,26 +16,96 @@ module.exports = withNextra({
       destination: '/docs/getting-started',
       permanent: false
     },
-    {
-      source: '/docs/installation',
-      destination: '/docs/getting-started',
-      permanent: false
-    },
     {
       source: '/examples',
-      destination: '/examples/next-13',
+      destination: '/examples/app-router',
       permanent: false
     },
 
     // Moved pages
+    {
+      source: '/docs/installation',
+      destination: '/docs/getting-started',
+      permanent: true
+    },
     {
       source: '/docs/getting-started/production-checklist',
-      destination: '/docs/usage/production-checklist',
+      destination: '/docs/production-checklist',
+      permanent: true
+    },
+    {
+      source: '/docs/usage/production-checklist',
+      destination: '/docs/production-checklist',
+      permanent: true
+    },
+    {
+      source: '/docs/next-13',
+      destination: '/docs/getting-started',
+      permanent: true
+    },
+    {
+      source: '/docs/next-13/client-components',
+      destination: '/docs/getting-started/app-router-client-components',
+      permanent: true
+    },
+    {
+      source: '/docs/next-13/server-components',
+      destination: '/docs/getting-started/app-router-server-components',
+      permanent: true
+    },
+    {
+      source: '/docs/next-13/middleware',
+      destination: '/docs/routing/middleware',
+      permanent: true
+    },
+    {
+      source: '/docs/next-13/navigation',
+      destination: '/docs/routing/navigation',
+      permanent: true
+    },
+    {
+      source: '/docs/usage/typescript',
+      destination: '/docs/typescript',
+      permanent: true
+    },
+    {
+      source: '/docs/usage/production-checklist',
+      destination: '/docs/production-checklist',
+      permanent: true
+    },
+    {
+      source: '/docs/usage/runtime-requirements-polyfills',
+      destination: '/docs/production-checklist#runtime-requirements',
+      permanent: true
+    },
+    {
+      source: '/docs/usage/configuration',
+      destination: '/docs/configuration',
+      permanent: true
+    },
+    {
+      source: '/docs/usage/error-handling',
+      destination: '/docs/configuration#error-handling',
+      permanent: true
+    },
+    {
+      source: '/docs/usage/core-library',
+      destination: '/docs/environments/core-library',
+      permanent: true
+    },
+    {
+      source: '/examples/next-13',
+      destination: '/examples/app-router',
+      permanent: true
+    },
+    {
+      source: '/examples/minimal',
+      destination: '/examples/pages-router',
       permanent: true
     },
     {
-      source: '/docs/production-checklist',
-      destination: '/docs/usage/production-checklist',
+      source: '/examples/advanced',
+      destination: '/examples/pages-router-advanced',
       permanent: true
     }
   ],

docs/package.json

@@ -17,8 +17,8 @@
     "clsx": "^1.2.1",
     "http-status-codes": "^2.2.0",
     "next": "^13.4.6",
-    "nextra": "^2.4.2",
-    "nextra-theme-docs": "^2.4.2",
+    "nextra": "^2.8.0",
+    "nextra-theme-docs": "^2.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.2.4"

docs/pages/blog/index.mdx

@@ -18,6 +18,14 @@ Failed attempts at writing docs that somehow turned into blog posts.
 Resources on `next-intl` created by and for the community.
 
 <div className="flex flex-col gap-4 py-8">
+  <CommunityLink
+    href="https://www.youtube.com/watch?v=pKolfZFW3gs"
+    title="Next.js 13 App Directory & i18n - Full Tutorial"
+    date="May 22, 2023"
+    author="By Tuomo Kankaanpää"
+    target="_blank"
+    type="video"
+  />
   <CommunityLink
     href="https://www.smashingmagazine.com/2023/03/internationalization-nextjs-13-react-server-components/"
     title="Internationalization in Next.js 13 with React Server Components"
@@ -26,6 +34,14 @@ Resources on `next-intl` created by and for the community.
     target="_blank"
     type="article"
   />
+  <CommunityLink
+    href="https://noahflk.com/blog/multilang-next-app"
+    title="Adding internationalization to a Next.js app"
+    date="Nov 22, 2022"
+    author="By @noahflk"
+    target="_blank"
+    type="article"
+  />
   <CommunityLink
     href="https://buttercms.com/blog/nextjs-localization/"
     title="Next.js Localization: How to Build a Multilingual Website with next-intl"

docs/pages/blog/translations-outside-of-react-components.mdx

@@ -111,7 +111,7 @@ Additionally, this approach is more robust to possibly unexpected states, like t
 
 If you’re working with Next.js, you might want to translate i18n messages in [API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes), [Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/router-handlers) or the [Metadata API](https://nextjs.org/docs/app/api-reference/file-conventions/metadata).
 
-`next-intl` provides a [core library](/docs/usage/core-library) that is agnostic from React and can be used for these cases.
+`next-intl` provides a [core library](/docs/environments/core-library) that is agnostic from React and can be used for these cases.
 
 ```tsx
 import {createTranslator} from 'next-intl';
@@ -129,7 +129,7 @@ const t = createTranslator({locale: 'en', messages});
 t('hello', {name: 'world'});
 ```
 
-There's currently a proposal to further simplify this use case, by offering a set of [new APIs that integrate with Server Components](/docs/next-13/server-components#using-internationalization-outside-of-components) (currently in beta).
+There's currently a proposal to further simplify this use case, by offering a set of [new APIs that integrate with Server Components](/docs/getting-started/app-router-server-components#using-internationalization-outside-of-components) (currently in beta).
 
 ## This seems familiar
 

docs/pages/docs/_meta.json

@@ -1,7 +1,11 @@
 {
   "getting-started": "Getting started",
   "usage": "Usage guide",
+  "environments": "Environments",
+  "configuration": "Global configuration",
+  "routing": "Routing",
+  "typescript": "TypeScript",
+  "production-checklist": "Production checklist",
   "faq": "FAQ",
-  "next-13": "Next.js 13",
   "localization-management": "Localization management with Crowdin"
 }