创建nextjs项目&动态路由

官网

创建nextjs项目

npx create-next-app@latest
# or
yarn create next-app

开始nextjs服务

yarn dev
#npm run dev

修改next项目

pages/index.js

{/*可以修改为pages/index.jsx*/}
import styles from '@/styles/Home.module.css'
import Test from "@/components/Test/Test"

function Home() {
  return (
    <>
      <div className=''>
        <Test />
      </div>
    </>
  )
}

export default Home

components/Test/Test

import { useState,useEffect } from "react"

function Test(){
    const [count,setCount] = useState(0)
    const add = () =>{
        setCount(count+1)
    }
    return(
        <>
            <div>
                <p>{count}</p>
                <button onClick={()=>add()}>+1</button>
            </div>
        </>
    )
}

export default Test

修改端口

package.json

"dev": "next dev -p 3001"

动态路由

Nextjs与Nuxtjs动态路由类似

普通路由

先是普通路由:index.jsx

import styles from '@/styles/Home.module.css'
import Test from "@/components/Test/Test"
import Link from 'next/link'

function Home() {
  return (
    <>
      <div className=''>
        <Test />
        <Link href="/anime">动漫</Link>
      </div>
    </>
  )
}

export default Home

动态路由

pages/anime/index.jsx

import { useState,useEffect } from "react"
import Link from "next/link"
function index(){
    const animeName = ["刀剑神域","野良神","孤独摇滚"]
    return (
        <>
            <div>
                <span>this is anime</span>
                {animeName.map(name=>(/*注意:这里是()不是{}*/
                    <Link href={`/anime/${name}`}>{name}</Link>
                ))}
            </div>
        </>
    )
}
export default index

pages/anmie/[name].jsx

import { useRouter } from "next/router"
import { useState,useEffect } from "react"
function name(){
    const [name,setName] = useState('')
    const router = useRouter()/*useRouter()*/
    return (
        <>
            <div>{router.query.name}</div>
        </>
    )
}

export default name