之前都是直接用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>-></span>
</h2>
<p className={inter.className}>
Find in-depth information about Next.js features and API.
</p>
</a>
用起来还是相当方便的,非常不错
Next.js
记住了