nextjs入门

飞鸟malred

已于 2023-12-02 17:10:10 修改

阅读量467

点赞数

分类专栏：前端文章标签： nextjs ssr 服务端渲染

于 2023-12-02 17:08:53 首次发布

本文链接：https://blog.csdn.net/m0_60707623/article/details/134754702

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

创建项目

npx create-next-app 项目名

体验文件路由

nextjs提供了文件路由的功能, 根据文件系统的目录结构, 可以识别为对应的页面路由

创建页面

首先, 在src下创建pages目录, 然后创建一个about文件(对应about页面)和main/index.js文件(对应首页)

pages/main/index

const Main=()=>{
    return (
        <div>main</div>
    )
}

export default Main

pages/about.js

const About = () => {
    return (
        <div>about</div>
    )
}

export default About

启动项目并查看页面

npm run dev

pages下的文件, 文件名作为路由, 显示为页面

pages下的文件夹, 文件夹的名称作为路由, 对应该文件夹的index文件的内容

多级路由

创建pages/content/mutli/a目录, 然后创建两个文件(index和test)

pages/content/multi/a/index.jsx

const Index = () => {
    return (
        <>index</>
    )
}
export default Index

pages/content/multi/a/test

const Test = () => {
    return (
        <>test</>
    )
}
export default Test

访问页面

动态路由

nextjs支持文件路由拥有动态的路径参数, 文件名称为 [参数名].js或jsx , 我们创建pages/dynamic/[id].jsx

pages/dynamic/[id].jsx

import {useRouter} from "next/router";

export default function DynamicId() {
    const router = useRouter()
    console.log(router)

    return (
        <div>
            {/*获取路由参数*/}
            current id - {router.query["id"]}
        </div>
    )
}

访问页面

slug 长路由

nextjs支持匹配一个路由下的多级子路由

pages/dynamic/[...slug].js

import {useRouter} from "next/router";

const Slug = () => {
    let slug = [];
    const router = useRouter();
    slug = router.query.slug;
    return (
        <div>
            <ul>
                {slug ?
                    slug.map((slug, i) => <li key={i}>{slug}</li>) :
                    <></>}
            </ul>
        </div>
    );
};

export default Slug;

访问页面

这里应该是匹配到[id]了

路由跳转

我们使用Link组件来跳转
pages/main/index.js

import Link from "next/link";

const Main = () => {
    return (
        <div>
            <Link href={'/dynamic/123'}>to dynamic id</Link>
        </div>
    )
}

export default Main

访问页面

整合chakra组件库

安装依赖

npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

设置

// pages/_app.js
import { ChakraProvider } from '@chakra-ui/react'
// 个人踩坑
// 如果用了_app.js, 就需要在这里也引入globals.css或tailwind的css配置, 才能使tailwind生效
import '@/app/globals.css'

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

应用程序目录设置

// app/providers.tsx
'use client'

import { CacheProvider } from '@chakra-ui/next-js'
import { ChakraProvider } from '@chakra-ui/react'

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <CacheProvider>
      <ChakraProvider>{children}</ChakraProvider>
    </CacheProvider>
  )
}

// app/layout.tsx
import { Providers } from './providers'

export default function RootLayout({children}) {
    return (
        <html lang="en">
        <body className={inter.className}>
        <Providers>{children}</Providers>
        </body>
        </html>
    )
}

使用

pages/main/index.js

import Link from "next/link";
import {
    Alert,
    AlertIcon,
} from '@chakra-ui/react'

const Main = () => {
    return (
        <div>
            <Alert status='success'>
                <AlertIcon />
                Data uploaded to the server. Fire on!
            </Alert>
            <Link href={'/dynamic/123'}>to dynamic id</Link>
        </div>
    )
}

export default Main