Nextjs15 基础配置使用

Nextjs15 基础配置使用

起步

注意:node 版本 V18.18 以上

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

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

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

  1. 也可以创建嵌套路由

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

  1. 可以创建动态路由

例如: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
  1. 也可以创建文件夹,但是创建路由的时候忽略当前文件夹。

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

  1. 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>
  )
}
  1. 其他的page.tsx 文件统计目录下也可以有自己的layout.tsx, 作用是为这个对应路由下提供公共的 layout 布局
tsx 复制代码
const ProductLayout = ({
  children
}: Readonly<{
  children: React.ReactNode
}>) => {
  return (
    <>
      {children}
      <h4>Feature product section</h4>
    </>
  )
}

export default ProductLayout
  1. 可以在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端点

相关推荐
誰能久伴不乏15 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪1 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾1 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的1 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句1 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6661 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko2 小时前
HTML 常用标签速查表
前端·html
gis收藏家2 小时前
从稀疏数据(CSV)创建非常大的 GeoTIFF(和 WMS)
前端