使用Next.js时可移除哪些React生态系统？Next.js解决React的非SSR类问题有哪些？

问题1：使用Next.js时可以移除哪些React生态系统组件？ #

• 路由类库：比如react-router-dom，Next.js自带基于文件系统的路由机制，在app或pages目录下创建文件即可定义路由，支持动态路由、嵌套路由等，完全替代第三方路由库的功能。
• 手动SSR/静态生成工具：比如react-dom/server、next-routes这类需要手动配置服务端渲染的工具，Next.js内置了SSR、SSG、ISR等多种渲染策略，无需手动实现底层渲染逻辑。
• 代码分割工具：比如react-loadable，Next.js会自动对页面进行代码分割，按需加载资源，无需额外引入工具来实现代码拆分优化。
• 自定义构建配置工具：除非有特殊定制需求，否则像自定义webpack、babel配置都可以移除，Next.js默认提供了优化好的构建流程，覆盖绝大多数开发场景。
• 样式加载器：比如css-loader、style-loader，Next.js内置了对CSS、Sass、Less等样式方案的支持，直接就能编写样式，无需手动配置这些加载器。

问题2：Next.js除SSR和静态站点生成外，还能解决哪些React常见问题？ #

• 首屏加载慢：React SPA通常需要加载完整JS包后才能渲染页面，Next.js通过预渲染、自动代码分割等方式，让首屏更快呈现内容，减少白屏时间。
• SEO效果差：React SPA的客户端渲染内容难以被搜索引擎爬虫抓取，Next.js的预渲染页面能提供完整的HTML内容，大幅提升页面在搜索引擎中的排名。
• 部署繁琐：React SPA需要额外配置服务器处理路由刷新问题，Next.js可直接部署到Vercel、Netlify等平台，也能导出静态文件或部署到Node.js服务器，部署流程更简洁。
• 数据获取逻辑混乱：React中数据获取通常在组件生命周期或useEffect中处理，容易出现重复的加载、错误状态逻辑，Next.js提供getServerSideProps、getStaticProps等API，让数据获取更规范，减少重复代码。
• 环境变量管理复杂：React中环境变量需要加REACT_APP_前缀才能在客户端使用，Next.js支持区分服务器端和客户端环境变量，无需特定前缀即可在服务端安全使用，管理更灵活。
• 图片性能优化难：React原生<img>标签缺乏懒加载、格式转换等优化，Next.js的next/image组件自动提供这些功能，提升图片加载速度和页面性能。
• 字体加载体验差：React中直接引入字体容易出现FOIT（隐形文本闪烁）问题，Next.js的next/font组件自动优化字体加载流程，避免这类问题，提升页面体验。

内容的提问来源于stack exchange，提问作者Amr Hendawy