客户端组件与我们在 Next.js 中使用的先前类型的组件相反且相似。 他们可以使用浏览器、提供交互性并将其 JS 代码发送到客户端。 虽然App Router 中的所有组件默认都是服务器组件,但可以通过在文件顶部声明“使用客户端”来声明客户端组件。 这种区别仅适用于新的应用程序路由器。 以下是一个快速概述: 客户端组件...
在使用NextJS时,“pages”和“app”目录都是需要的。其中,“pages”目录是用来放置应用的页面,而“app”目录则是用来指定全局的应用布局和样式。至于“index.tsx”或“page.tsx”的选择,则是根据需要进行决定。“index.tsx”用于给某个页面创建主页面的文件。如果不使用“index.tsx”,在“pages”目录下的每个文件...
开始使用Next.js最简单的方法是使用“create-next-app”。这个CLI工具使您能够快速开始构建一个新的Next.js应用程序,并为您设置好一切。你可以使用默认的Next.js模板,或者使用一个“官方的Next.js示例”来创建一个新的应用程序。要开始,使用以下命令:
我们不再需要使用 Next.js 早期版本中的特殊<Head>和<Script>组件。我们也可以在这里添加「元数据」, 请注意,layout.tsx和page.tsx通常应该是服务器组件,因为我们应该让布局组件在服务器渲染,这样用户可以下载更少的 js,让用户更快看到一些内容。 // app/layout.tsx export default function RootLayout({ children...
现在,打开app/layout.js并向其中添加以下代码: // 📁 app/layout.js const inter = Inter({ subsets: ['latin'] }) export const metadata = { title: 'Family Guy', description: 'Come here and learn more about Family Guy!', } export default function RootLayout({ children }) { ...
在Next.js中,可以通过在`pages`目录下创建一个名为`_app.js`的文件来添加持久组件。 持久组件是指在页面切换时保持不变的组件,通常用于包裹整个应用程序的布局和共享的组件。在`_ap...
打开终端,安装create-next-app: npm i -g create-next-app@latest 导航到要安装它的目录,并在其自己的目录中创建一个新的 Next.js 应用程序: npx create-next-app@latest new-app 下一步会提示你为新应用程序指定一些配置选项。在本教程中,您只需接受建议的默认值即可。
Next.js 大会介绍了 Next.js 13,一个 React App 框架的最新版本。Next.js 13 希望通过提供创新的特性开发出“动态无限制”的 App,其中许多特性仍处于 Alpha 或 Beta 阶段。新特性对编译器、路由和渲染基础设施进行了更新,并改进了组件工具包。 Next.js 团队在最近的主题演讲中解释了 Next.js 最新版本背后的逻...
// app/about/page.tsx export default function AboutPage() { return ( 这个应用是一个完全翻译的静态网站 1.5 更新 next.config.js 文件以启用静态导出 通过这个配置,在运行 npm run build 时,Next.js 将在 out 文件夹中生成静态的 HTML/CSS/JS 文件。
App Router 是 Next.js 13 引入的新路由系统,它使用app目录来组织路由,带来了许多令人兴奋的新特性。 优点: React 服务器组件支持:这是一个游戏规则改变者,允许在服务器端渲染复杂组件,大大提升了性能。 灵活的布局系统:通过嵌套布局,你可以更容易地创建复杂的页面结构。