Next.js框架学习

Evelynnn
171 阅读2分钟

Nextjs使用React作为前端框架底层，是一种服务端框架。

01. Nextjs脚手架

使用npx create-next-app@latest创建一个Next脚手架，npm run dev运行脚手架。

（Next脚手架中基本配置文件如下：）

image.png

02.静态路由

Nextjs框架，其中pages文件夹 / src/pages文件夹，采用文件路由系统，即文件的路径就是路由的路径，文件的内容就是对应的页面组件。

（如在pages目录下，创建一个test.jsx文件，即路径是/test时，就会渲染Test组件的内容；如/pages/index.jsx表示根路径）

  • src/pages/_app.tsx：作为所有页面的入口文件
import '@/styles/globals.css' 
import Head from 'next/head'

export default function App({ Component, pageProps }) { 
    return (
         <Head>
             // 给所有pages页面的head标签，都增加了一个meta标签
             <meta name="viewport" content="width=device-width, initial-scale=1" /> 
             <meta charSet="utf-8" /> <meta name="renderer" content="webkit" /> 
             <meta name="force-rendering" content="webkit" />
             <meta httpEquiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
         </Head>
         <Component {...pageProps} /> 
    )
}

03.动态路由

动态路由是指在运行时根据参数的不同来动态生成路由。

在pages 目录下创建一个带有参数的文件，文件名使用 中括号[] 包裹参数名。例如，在目录下创建/pages/posts/[id].tsx的文件（如： /posts/1、/posts/2 ...），访问不同的路径时会根据参数的不同渲染对应的页面组件，在页面组件中通过 useRouter 钩子来获取参数的值。

image.png

import React from 'react'
import { useRouter } from 'next/router'
export default function Home() { 
    const router = useRouter() 
    const id = [router.query.id]
    return ( 
        <div> postid{id} </div> 
    ) 
}
// 相当于localhost:3000/posts/:id（这个路由），id可以动态改变。

04.Link路由跳转

Link 组件是 Next.js 提供的一个特殊组件，它可以进行无刷新的页面跳转，相当于传统H5里的a标签。

import Link from "next/link"
export default function Home () {
    return (
        <div>
          <h1>link页面</h1>
          <ul>
            {[1,2,3,4,5].map((item) => (
              <li key={item}>
                <Link href={/posts/${item}}>
                  跳转post页面 {item}
                </Link>
              </li>
            ))}
          </ul>
        </div>
    )
}

05.API动态路由

动态路由允许你在 API 路由中使用参数，以便根据不同的请求动态生成响应。如：在 pages/api目录下创建一个名为 [id].js 的文件，在该文件中，编写处理 API 请求的代码。你可以使用 req.query 对象来获取动态路由参数。

avatar
文章
阅读
粉丝