nextjs 快速入门教程

1. 创建项目

2. 创建页面

3. 创建模板

4. 创建组件

1创建项目

npx create-next-app@latest

2 创建页面

默认首页

文件地址：app/news/page.js

访问路径：/news

const Blog = () => {
  return <h1>Blog Home</h1>;
};

export default Blog;

动态路由

文件地址：app/posts/[id].js

访问地址：/posts/3

import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  return <p>Post: {id}</p>;
};

export default Post;

链接添加

import Link from 'next/link';

const Home = () => {
  return (
    <div>
      <Link href="/about" prefetch>
        <a>About</a>
      </Link>
    </div>
  );
};

export default Home;

3 创建模版

4 创建组件