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

新建一个文件为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>
    )

}

这样运行就没有问题了