Next.js 多语言应用程序，具有 2 种不同的 UI 结构

问题描述 投票：0回答：1

我有一个 Next.js、Express Web 应用程序。

我想用两种语言制作我的网站，即英语和阿拉伯语。

我读过有关 i18n 的内容，但它不起作用。

在大多数语言中，例如英语和西班牙语，它们都是 LTR 导向的，因此翻译是可行的。

但是我不能只翻译阿拉伯语，因为我还必须将组件制作为RTL，所以我必须在阿拉伯语版本中更改一些CSS。 （不同的UI结构）

所以最好的解决方案是每页制作 2 页，一页阿拉伯文，一页英文。

import { useRouter } from 'next/router'
 
function BasePage () { 
    const router = useRouter() 
    return ( 
        router.locale === 'en' ? ( 
            <EnglishPage /> 
        ) : ( 
            <ArabicPage /> 
        ) 
    ) 
}

但是这种方法行不通，因为它对 SEO 非常不利，因为没有任何东西会成为 SSR，所有页面都将是组件。

那么我还能做些什么来为每个内容制作 2 页吗？或者我应该考虑寻找重定向的解决方案？

reactjs internationalization next.js server-side-rendering
1个回答
0
投票

您不需要为每种语言制作两个组件。您可以使用 i18n 库，例如next-intl 并通过 

dir
元素中的 
<html>
属性利用 CSS 中的 CSS 逻辑属性。

引用我在另一个问题的回答：

CSS 为逻辑属性提供内置支持。此功能允许您定义一次属性，浏览器会根据父级的 

dir
属性自动调整它们，从而简化了样式。

例如，您应该选择 

padding-left: 1rem
，而不是指定 
padding-inline-start: 1rem
。

语法：

[property]-[axis]-[direction]: [value]
  • 轴可以是 
    inline
    或 
    block
    。
  • 方向可以是 
    start
    或 
    end
    。 支持的属性包括：
  • 填充
  • 保证金
  • 插图（上、左、下、右）
  • 文本对齐
  • 边框
  • 边界半径
  • 滚动填充
  • 滚动边距

要利用逻辑属性，请设置父级的页面方向（或 

html
标签），如下所示：

// This is a JSX code
<html dir={lang === "ar" ? "rtl" : "ltr"}>

随后，使用逻辑属性而不是物理属性。例如：

不要 做 
padding-left
 
padding-inline-start
 
padding-right
 
padding-inline-end
 
padding-top
 
padding-block-start
 
padding-bottom
 
padding-block-end
 
margin-left
 
margin-inline-start
 
margin-right
 
margin-inline-end
 
border-left
 
border-inline-start
 
border-right
 
border-inline-end
 
border-top-left-radius
 
border-start-start-radius
、
border-start-end-radius
、
border-end-start-radius
、
border-end-end-radius
 
text-align: left
 
text-align: start
 
scroll-padding-left
 
scroll-padding-inline-start
 
scroll-padding-right
 
scroll-padding-inline-end
 
scroll-margin-left
 
scroll-margin-inline-start
 
scroll-margin-right
 
scroll-margin-inline-end

通过这样做，

padding-inline-start
在LTR语言中充当
padding-left
，在RTL语言中充当
padding-right
。对于从上到下的语言（例如日语），请使用 
padding-block-start
而不是 
padding-top
。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.