next.js 应用程序如何针对移动屏幕进行优化？
How do next.js applications optimize for mobile screens?
我刚刚发现，由于我使用 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
但是index.html似乎没有位置。
我的问题很简单，Next.js 应用程序如何针对移动屏幕进行优化？他们甚至应该有一个 index.html，如果有的话在哪里？以及 favicon 是如何工作的，因为我已经创建了静态文件夹并将 favicon 放在里面，但我很确定让 favicon 做任何事情，它必须由文件引用（通常 index.html）。
Next 有这个 Document 组件，您可以根据自己的喜好对其进行自定义。
正如他们的官方文档所说：
Is used to change the initial server side rendered document markup
您可以使用它来自定义您的 head 标签内容，就像您在 index.html 中所做的那样。
如果您希望您的应用使用媒体查询，请不要忘记在 head 标签中添加 <meta name="viewport"content="width=device-width, initial-scale=1.0" />。
下一个项目不应有特定的 index.html 文件。相反，初始页面应该是专门位于 pages/index.js.
中的组件
我刚刚发现，由于我使用 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
但是index.html似乎没有位置。
我的问题很简单，Next.js 应用程序如何针对移动屏幕进行优化？他们甚至应该有一个 index.html，如果有的话在哪里？以及 favicon 是如何工作的，因为我已经创建了静态文件夹并将 favicon 放在里面，但我很确定让 favicon 做任何事情，它必须由文件引用（通常 index.html）。
Next 有这个 Document 组件，您可以根据自己的喜好对其进行自定义。 正如他们的官方文档所说：
Is used to change the initial server side rendered document markup
您可以使用它来自定义您的 head 标签内容，就像您在 index.html 中所做的那样。
如果您希望您的应用使用媒体查询，请不要忘记在 head 标签中添加 <meta name="viewport"content="width=device-width, initial-scale=1.0" />。
下一个项目不应有特定的 index.html 文件。相反，初始页面应该是专门位于 pages/index.js.