P02:如何新建Page页面和Component组件

落日映苍穹つ 2023-10-06 21:01 7阅读 0赞

Next.js 教程

  • 新建页面和访问路径
  • Component组件的制作

新建页面和访问路径

直接在根目录下的 pages 文件夹下,新建一个 willem.js 页面。然后写入下面的代码:

next-create\pages\willem.js

  1. function Willem(){
  2. return (<button>willem</button>)
  3. }
  4. export default Willem;

只要写完上面的代码,Next框架就自动作好了路由,这个也算是Next的一个重要优点,给我们节省了大量的时间。

在浏览器访问http://localhost:3000/willem,可以看到如下界面:

在这里插入图片描述
现在要作一个更深的页面,比如把有关博客的界面都放在这样的路径下http://localhost:3000/blog/aboutBlog,其实只要在 pages 文件夹下再建立一个新的文件夹blog,然后进入blog文件夹,新建一个aboutBlog.js文件,就可以实现了。

aboutBlog.js 文件内容,我们这里就用最简单的写法了


next-create\pages\blog\aboutBlog.js

  1. export default ()=><div>aboutBlog page</div>

写完后,就可以直接在浏览器中访问了,是不是发现Next框架真的减轻了我们大量的工作。

在这里插入图片描述

Component组件的制作

制作组件也同样方便,比如要建立一个 willem 组件,直接在 components 目录下建立一个文件 willem.js 然后写入下面代码:

next-create\components\willem.js

  1. export default ({
  2. children})=><button>{
  3. children}</button>

组件写完后需要先引入,比如我们在Index页面里进行引入:

  1. import Willem from '../components/willem'

使用就非常简单了,直接写入标签就可以。

  1. <Willem>按钮</Willem>

一个自定义组件的创建和使用也是这么简单, 如果你React的基础很好,那本文的内容对你来说就更加简单了。也就是说Next框架并没有给我们带来太多的学习成本,但是为我们减轻了很多配置工作。

next-create\pages\index.js

  1. import Head from 'next/head'
  2. import Image from 'next/image'
  3. import styles from '../styles/Home.module.css'
  4. import Willem from '../components/willem'
  5. export default function Home() {
  6. return (
  7. <div className={
  8. styles.container}>
  9. <Head>
  10. <title>Create Next App</title>
  11. <meta name="description" content="Generated by create next app" />
  12. <link rel="icon" href="/favicon.ico" />
  13. </Head>
  14. <main className={
  15. styles.main}>
  16. <h1 className={
  17. styles.title}>
  18. Welcome to <a href="https://nextjs.org">Next.js!</a>
  19. </h1>
  20. <p className={
  21. styles.description}>
  22. Get started by editing{
  23. ' '}
  24. <code className={
  25. styles.code}>pages/index.js</code>
  26. </p>
  27. <Willem>按钮</Willem>
  28. </main>
  29. </div>
  30. )
  31. }

在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,7人围观)

还没有评论,来说两句吧...

相关阅读