docs: Latest RSC beta and wording improvements

docs/components/CodeSnippets.tsx

@@ -336,39 +336,39 @@ function buildOutput() {
  <span className="line"> </span>
  <span className="line">
  <span style={{color: 'var(--shiki-token-comment)'}}>
- Route{' '}Size{' '}First load JS
+ Route{' '}Size{'  '}First load JS
  </span>
  </span>
  <span className="line">
  <span style={{color: 'var(--shiki-color-text)'}}>┌ ● /</span>
  <span style={{color: 'var(--shiki-color-text)'}}> </span>
  <span style={{color: 'var(--shiki-color-text)'}}>
- {' '}637
+ {' '}1.4
  </span>
- <span style={{color: 'var(--shiki-color-text)'}}> B</span>
- <span style={{color: 'var(--shiki-color-text)'}}>{' '}</span>
+ <span style={{color: 'var(--shiki-color-text)'}}> kB</span>
+ <span style={{color: 'var(--shiki-color-text)'}}>{'  '}</span>
  <span style={{color: 'var(--shiki-token-string-expression)'}}>
- 90.1 kB
+ 104 kB
  </span>
  </span>
  <span className="line">
  <span style={{color: 'var(--shiki-color-text)'}}>├ ● /about</span>
  <span style={{color: 'var(--shiki-color-text)'}}>{' '}</span>
- <span style={{color: 'var(--shiki-color-text)'}}>512</span>
+ <span style={{color: 'var(--shiki-color-text)'}}>205</span>
  <span style={{color: 'var(--shiki-color-text)'}}> B</span>
- <span style={{color: 'var(--shiki-color-text)'}}>{' '}</span>
+ <span style={{color: 'var(--shiki-color-text)'}}>{'  '}</span>
  <span style={{color: 'var(--shiki-token-string-expression)'}}>
- 92.5 kB
+ 97.5 kB
  </span>
  </span>
  <span className="line">
- <span style={{color: 'var(--shiki-color-text)'}}>└ ● /contact</span>
+ <span style={{color: 'var(--shiki-color-text)'}}>└ λ /contact</span>
  <span style={{color: 'var(--shiki-color-text)'}}>{' '}</span>
- <span style={{color: 'var(--shiki-color-text)'}}>931</span>
- <span style={{color: 'var(--shiki-color-text)'}}> B</span>
+ <span style={{color: 'var(--shiki-color-text)'}}>3.24</span>
+ <span style={{color: 'var(--shiki-color-text)'}}> kB</span>
  <span style={{color: 'var(--shiki-color-text)'}}>{' '}</span>
  <span style={{color: 'var(--shiki-token-string-expression)'}}>
- 91.2 kB
+ 106 kB
  </span>
  </span>
  <span className="line"> </span>

docs/pages/docs/getting-started/app-router-server-components.mdx

@@ -13,7 +13,7 @@ Next.js 13 introduces support for [React Server Components](https://nextjs.org/d
 ## Current beta version
 
 ```
-npm install [email protected].16
+npm install [email protected].17
 ```
 
 This beta version was tested with `[email protected]`.

docs/pages/docs/usage/messages.mdx

@@ -93,11 +93,25 @@ As your app grows, you'll want to reuse messages among your components. If you u
 
 **Examples:**
 
-- You're displaying products in your app and often need to resolve a category identifier to a human readable label (e.g. `new` → "Just in"). To ensure consistency, you can add a `ProductCategory` component that turns the `category` into a string.
+- You're displaying products in your app and often need to resolve a category identifier to a human readable label (e.g. `new` → "Just in"). To ensure consistency, you can add a `ProductCategory` component that turns the `category` into a styled badge.
 - You commonly need a dialog that displays a "confirm" and "cancel" button. In this case, consider adding a `ConfirmDialog` component to reuse the messages along with the functionality.
 
 There might be cases where you want to use the same message in different components, but there's no reasonable opportunity for sharing the message via a component. This might be symptom that these components should use separate messages, even if they happen to be the same for the time being. By using separate labels, you gain the flexibility to use more specific labels (e.g. "not now" instead of "cancel").
 
+For edge cases where the reuse of messages among different components is hard to achieve with shared components, you can consider adding a hook that shares the translation behavior:
+
+```tsx filename="useLocaleLabel.tsx"
+export default function useLocaleLabel() {
+ const t = useLocaleLabel('useLocaleLabel');
+
+ function getLocaleLabel(locale: 'en' | 'de') {
+ return t('label', {locale});
+ }
+
+ return getLocaleLabel;
+}
+```
+
 </details>
 
 <details>

docs/pages/index.mdx

@@ -52,8 +52,8 @@ import UserTestimonial from 'components/UserTestimonial';
  />
  <FeaturePanel
  code={<CodeSnippets.buildOutput />}
- title="Static & dynamic rendering"
- description="Get the best performance from your app by supporting internationalization on both static and dynamic pages."
+ title="Performance-obsessed, and Next.js-native"
+ description="Use static or dynamic rendering, Server or Client Components, and App or Pages Router."
  />
  <FeaturePanel
  code={<CodeSnippets.standards />}