diff --git a/docs/pages/blog/index.mdx b/docs/pages/blog/index.mdx index a1a3ab613..068fe5783 100644 --- a/docs/pages/blog/index.mdx +++ b/docs/pages/blog/index.mdx @@ -15,6 +15,8 @@ Failed attempts at writing docs that somehow turned into blog posts. ## Community links +Resources on `next-intl` created by and for the community. +
+ { + // In case of a gateway timeout, notify the + // user that we'll try again in 5 minutes if (error.status === 504) { - // Notify the user that we'll try again in 5 minutes + // (let's assume `t` is defined here for the sake of the example) return t('timeout', {nextAttempt: addMinutes(new Date(), 5)}); } }); @@ -107,7 +109,7 @@ Additionally, this approach is more robust to possibly unexpected states, like t ## The exception that proves the rule -If you’re working with Next.js, you might like to translate i18n messages in [API routes](https://nextjs.org/docs/api-routes/introduction), [Route Handlers](https://beta.nextjs.org/docs/routing/route-handlers) or the [Metadata API](https://beta.nextjs.org/docs/api-reference/metadata). +If you’re working with Next.js, you might want to translate i18n messages in [API routes](https://nextjs.org/docs/api-routes/introduction), [Route Handlers](https://beta.nextjs.org/docs/routing/route-handlers) or the [Metadata API](https://beta.nextjs.org/docs/api-reference/metadata). `next-intl` provides a [core library](/docs/usage/core-library) that is agnostic from React and can be used for these cases. @@ -133,6 +135,6 @@ There's currently a proposal to further simplify this use case, by offering a se If you’ve been working with React for a longer time, you might have experienced the change [from `component{DidMount,DidUpdate,WillUnmount}` to `useEffect`](https://legacy.reactjs.org/docs/hooks-effect.html#explanation-why-effects-run-on-each-update). The reason why `useEffect` is superior is because it nudges the developer into a direction where the app is always in sync and by doing this, a whole array of potential issues just magically disappear. -By limiting ourselves to only format messages during render, we're in a similar situation: The rendered output of translated messages is always in sync with app state. +By limiting ourselves to only format messages during render, we're in a similar situation: The rendered output of translated messages is always in sync with app state and we can rely on the app being consistent. Related: ["How can I reuse messages?" in the structuring messages docs](/docs/usage/messages#structuring-messages) diff --git a/docs/pages/docs/next-13/server-components.mdx b/docs/pages/docs/next-13/server-components.mdx index eb3d3146a..5269de287 100644 --- a/docs/pages/docs/next-13/server-components.mdx +++ b/docs/pages/docs/next-13/server-components.mdx @@ -395,6 +395,8 @@ import { } from 'next-intl/server'; ``` +Note however that the `useTranslations` hook is the primary API to translate messages in your app. Related: [How (not) to use translations outside of React components](/blog/translations-outside-of-react-components) + ## CDN caching Since `next-intl` is currently SSR-only, it's a good idea to use [CDN caching](https://vercel.com/docs/concepts/edge-network/caching#stale-while-revalidate) via [`headers`](https://nextjs.org/docs/api-reference/next.config.js/headers) in `next.config.js` to get the same level of performance from dynamic rendering as you'd get from static rendering ([learn more](https://youtu.be/bfLFHp7Sbkg?t=490)). Also note that [the Next.js Cache](https://nextjs.org/blog/next-13-2#nextjs-cache) improves the performance for dynamically rendered pages.