网站备案半身照,wordpress缩略图幻灯片展现,七星互联免费主机,做电商从哪里入手创建项目
npx create-next-app 项目名 体验文件路由
nextjs提供了文件路由的功能, 根据文件系统的目录结构, 可以识别为对应的页面路由
创建页面
首先, 在src下创建pages目录, 然后创建一个about文件(对应about页面)和main/index.js文件(对应首页) pages/main/index
con…创建项目
npx create-next-app 项目名 体验文件路由
nextjs提供了文件路由的功能, 根据文件系统的目录结构, 可以识别为对应的页面路由
创建页面
首先, 在src下创建pages目录, 然后创建一个about文件(对应about页面)和main/index.js文件(对应首页) pages/main/index
const Main(){return (divmain/div)
}export default Mainpages/about.js
const About () {return (divabout/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 (divul{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 (divLink 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.cssfunction MyApp({ Component, pageProps }) {return (ChakraProviderComponent {...pageProps} //ChakraProvider)
}export default MyApp应用程序目录设置 // app/providers.tsx
use clientimport { CacheProvider } from chakra-ui/next-js
import { ChakraProvider } from chakra-ui/reactexport function Providers({ children }: { children: React.ReactNode }) {return (CacheProviderChakraProvider{children}/ChakraProvider/CacheProvider)
} // app/layout.tsx
import { Providers } from ./providersexport default function RootLayout({children}) {return (html langenbody className{inter.className}Providers{children}/Providers/body/html)
}使用
pages/main/index.js import Link from next/link;
import {Alert,AlertIcon,
} from chakra-ui/reactconst Main () {return (divAlert statussuccessAlertIcon /Data uploaded to the server. Fire on!/AlertLink href{/dynamic/123}to dynamic id/Link/div)
}export default Main
