当前位置：首页 > news >正文

next.js（二）——从react到next.js

news 2025/11/13 9:02:28

新建一个文件为package.json内容为

{}

在项目根目录下执行

npm install react@latest react-dom@latest next@latest

然后package.json文件里新增内容，如下

{"dependencies": {"next": "^16.0.1","react": "^19.2.0","react-dom": "^19.2.0"}
}

之后，就可以删除掉一部分代码，只保留jsx代码，并将原html后缀改为.jsx
剩余代码如下

import { useState } from 'react'function Header({title}){console.log({title})
}function HomePage(){const names = ['Green','Blue','John','wang']const [likes,setLikes] = useState(0);function handleClick(){setLikes(likes + 1)}return (<div><Header title='hello gy'/><ul>{names.map((name)=>(<li key={name}>{name}</li>))}</ul><button onClick={handleClick}>Likes {likes}</button></div>)}

next.js使用文件做路由，所以就不需要代码来定义路由，直接使用文件和文件夹即可
比如app下的page.js是应用程序的主页面
layer.js是应用程序的主布局文件

运行上面的代码会报错，因为next.js默认是服务器组件，上述代码应该放在客户端

所以就涉及到服务器端和客户端

如果要使用客户端组件，需要把部分代码挪到另一个文件并使用client组件

app目录下创建like-button.js,把点击相关的代码挪进去，并使用'use client'

'use client';import { useState } from 'react'export default function LikeButton(){const [likes,setLikes] = useState(0);function handleClick(){setLikes(likes + 1)}return <button onClick={handleClick}>Likes {likes}</button>}

另外注意在app目录下需要创建一个layout.js，内容如下

export const metadata = {title: 'Next.js',description: 'Generated by Next.js',
};export default function RootLayout({ children }) {return (<html lang="en"><body>{children}</body></html>);
}

如果不加这个文件会报错

该文件是应用程序的主要布局

随后在page.js里引用刚刚定义的LikeButton组件

import LikeButton  from "./like-button"
function Header({title}){return <h1>{title ? title : 'title'}</h1>
}export default function HomePage(){const names = ['Green','Blue','John','wang']return (<div><Header title='hello gy'/><ul>{names.map((name)=>(<li key={name}>{name}</li>))}</ul><LikeButton/></div>)}

这样运行就没有问题了

查看全文

http://www.dtcms.com/a/601866.html