172-Next.js入门

 

之前都是直接用React来写前端

现在来试试看Next.js框架

先来创建一个新的next项目

npx create-next-app

然后就开始创建了

我们来看下目录结构

然后我们试着跑一下这个新创建出来的next项目

npm run dev

然后我们打开localhost看看

localhost:3000

页面就出来了

那么我们来修改一点东西试试看

比如我们加一个图片image

<a
            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
          >
            By{' '}
            <Image
              src="/vercel.svg"
              alt="Vercel Logo"
              className={styles.vercelLogo}
              width={100}
              height={24}
              priority
            />
          </a>

比如我们加一个h2标题

  <a
          href="https://beta.nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          className={styles.card}
          target="_blank"
          rel="noopener noreferrer"
        >
          <h2 className={inter.className}>
            Docs <span>-&gt;</span>
          </h2>
          <p className={inter.className}>
            Find in-depth information about Next.js features and API.
          </p>
        </a>

用起来还是相当方便的，非常不错

Next.js

记住了