javascript - next.js 应用程序如何针对移动屏幕进行优化?

标签 javascript node.js reactjs next.js

enter image description here

我刚刚发现,自从我使用 Next.js 构建应用程序以来,我无法使用 CRA 的文件夹结构框架来构建或诊断我的应用程序。

不幸的是,我目前完全不知道 Next.js 应用程序应该如何为移动设备正确扩展网站。我一直认为这是 index.html 的工作(我已经写了,但我的应用程序似乎懒得找到它或使用它)。我查看了 Next.js 应用程序的默认文件夹结构:

├── README.md

├── components

│   ├── head.js

│   └── nav.js

├── next.config.js

├── node_modules

│   ├── [...]

├── package.json

├── pages

│   └── index.js

├── static

│   └── favicon.ico

└── yarn.lock

source

但似乎没有地方放置index.html。

我的问题很简单,Next.js 应用如何针对移动屏幕进行优化?他们是否应该有一个index.html,如果有的话在哪里?收藏夹图标是如何工作的,因为我已经创建了静态文件夹并将收藏夹图标放入其中,但我很确定让收藏夹图标执行任何操作,它必须由文件(通常是index.html)引用。

repo

最佳答案

接下来是这个Document您可以根据自己的喜好自定义组件。 正如他们的官方文档所说:

Is used to change the initial server side rendered document markup

您可以使用它来自定义您的 head 标签内容,就像您在 index.html 中所做的那样。 。 不要忘记添加<meta name="viewport"content="width=device-width, initial-scale=1.0" />如果您希望您的应用使用媒体查询,请在 head 标记中。

下一个项目不应该有特定的 index.html文件。相反,初始页面应该是专门位于 pages/index.js 中的组件。 .

关于javascript - next.js 应用程序如何针对移动屏幕进行优化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55263605/

相关文章:

javascript - React Native this._lazyCallableModules[name] 不是函数

javascript - 如何将此 jQuery 添加到我的 Javascript 函数中?

javascript - Mongoose 方法返回未定义

javascript - 查询子文档 MongoDB Node.JS

reactjs - 如何在 React 中组合多个类名?

javascript - 将语义 ui 导入到 React 组件中

javascript - 为什么 wp_enqueue_style 在这里不起作用?

javascript - 如何通过 Prop [REACT.JS] 将图像 url 从父组件传递到子组件

javascript - FormData 服务器端 NodeJS

reactjs - 如何为上一个/下一个按钮 ReactJS 创建单独的组件