Nextjs15 基础配置使用

起步

注意：node 版本 V18.18 以上

pnpm dlx create-next-app@latest 创建一个nextjs 15项目的基本结构模板

src/app 下文件夹会自动生成应用路由

例如：创建 src/about/page.tsx ，就会自动生成路由 /about, 访问这个路由会自动展示src/about/page.tsx 页面

也可以创建嵌套路由

例如：src/app/blog/first-post/page.tsx ，就会自动生成路由 /blog/first-post, 访问这个路由会自动展示src/app/blog/first-post/page.tsx 页面

可以创建动态路由

例如：src/app/products/[id]/page.tsx，就会自动生成路由 /products/[id], 当访问该路由，则会自动展示src/app/products/[id]/page.tsx 页面。该页面也可以通过params 获取id 参数

ts 复制代码

const ProductInfo = async ({ params }: { params: { id: string } }) => {
  const { id } = await params
  return <div>products info: {id}</div>
}

export default ProductInfo

也可以创建文件夹，但是创建路由的时候忽略当前文件夹。

例如：src/app/(auth)/login/page.tsx ，用小括号包裹，此时访问该页面的路由其实是/login

app/latout.tsx 可以书写共享UI

tsx 复制代码

...
export default function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <header className="bg-slate-900 text-white p-4 text-center">
          <p> Welcome to Nextjs</p>
        </header>
        {children}
        <footer className="bg-slate-900 text-white p-4 text-center">
          Code volution
        </footer>
      </body>
    </html>
  )
}

其他的page.tsx 文件统计目录下也可以有自己的layout.tsx, 作用是为这个对应路由下提供公共的 layout 布局

tsx 复制代码

const ProductLayout = ({
  children
}: Readonly<{
  children: React.ReactNode
}>) => {
  return (
    <>
      {children}
      <h4>Feature product section</h4>
    </>
  )
}

export default ProductLayout

可以在src/components 下创建 navigation.tsx 作为导航，引入layout.tsx 供用户跳转路由使用, Link,usePathname 的使用可以观察以下代码

tsx 复制代码

'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'

export default function Navigation() {
  const pathname = usePathname()
  const homeClass =
    pathname === '/' ? 'mr-4 text-white-500' : 'mr-4 text-blue-500'
  const aboutClass =
    pathname === '/about' ? 'mr-4 text-white-500' : 'mr-4 text-blue-500'
  const productClass =
    pathname === '/products/1' ? 'mr-4 text-white-500' : 'mr-4 text-blue-500'

  return (
    <nav>
      <Link href="/" className={homeClass}>
        Home
      </Link>
      <Link href="/about" className={aboutClass}>
        About
      </Link>
      <Link href="/products/1" className={productClass}>
        Product 1
      </Link>
    </nav>
  )
}

8.编程式导航

tsx 复制代码

'use client'

import { useRouter } from 'next/navigation'

const About = () => {
  const router = useRouter()

  return (
    <div>
      <h2>About pages</h2>
      <button
        onClick={() => router.push('/')}
        className="bg-blue-500 text-white p-2 rounded-md"
      >
        Go Home
      </button>
    </div>
  )
}

export default About

9.新方式构建构建 API 端点

参考这篇：Nextjs15 构建API端点