在现代Web开发中，构建静态网站是一项常见的任务。Next.js 是一个强大的React框架，它提供了服务器端渲染(SSR)和静态生成(Static Generation)的功能，使得构建现代静态网站变得更加容易。在本文中，我将手把手教你如何使用Next.js构建静态网站。
什么是静态网站？
静态网站是指内容在网页加载时不会发生变化的网站。与动态网站相比，静态网站的优势是性能更好，加载速度更快，可扩展性更强。
准备工作
在开始之前，请确保你已经安装了Node.js以及npm或yarn包管理器。
创建一个新的Next.js项目
首先，我们需要创建一个新的Next.js项目。打开命令行工具，执行以下命令：
npx create-next-app my-static-website
这将创建一个名为 my-static-website 的新项目文件夹，并自动生成所有必要的文件和依赖。
进入项目文件夹，并启动开发服务器：
cd my-static-website
npm run dev
在浏览器中打开 http://localhost:3000，你将看到一个默认的Next.js欢迎页面。
创建静态页面
现在，我们可以开始创建我们的静态页面了。在 pages 文件夹下创建一个新的文件，比如 about.js：
function About() {
return (
<div>
<h1>About</h1>
<p>This is an example about page.</p>
</div>
);
}
export default About;
在浏览器中访问 http://localhost:3000/about，你将看到我们刚刚创建的关于页面。
静态生成
Next.js的一个强大功能是静态生成，它可以在构建时预先生成页面的内容，以提供最好的性能和SEO效果。
为了演示静态生成，我们将创建一个动态的博客列表页面。在 pages 文件夹下创建一个新的文件 blog.js：
import Link from 'next/link';
function Blog({ posts }) {
return (
<div>
<h1>Blog</h1>
<ul>
{posts.map(post => (
<li key={post.id}>
<Link href={`/blog/${post.slug}`}>
<a>{post.title}</a>
</Link>
</li>
))}
</ul>
</div>
);
}
export async function getStaticProps() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
return {
props: {
posts,
},
};
}
export default Blog;
上述代码中，我们使用 getStaticProps 函数获取博客文章列表，并将其作为 props 传递给 Blog 组件。在 getStaticProps 函数中，我们使用了 fetch 方法从一个API获取文章列表。
在浏览器中访问 http://localhost:3000/blog，你将看到我们的博客列表页面。
动态路由
为了演示动态路由，我们将创建一个动态的博客文章页面。继续在 pages 文件夹下创建一个新的文件夹 blog，并在其中创建一个新的文件 [slug].js ：
import { useRouter } from 'next/router';
function BlogPost() {
const router = useRouter();
const { slug } = router.query;
return (
<div>
<h1>{slug}</h1>
<p>This is a blog post with dynamic route.</p>
</div>
);
}
export default BlogPost;
上述代码中，我们使用 useRouter 钩子来获取动态路径的参数 slug，并在页面中显示。这样，无论用户访问什么路径，对应的 slug 将作为页面的一部分。
在浏览器中访问 http://localhost:3000/blog/hello-world，你将看到我们的动态博客文章页面。
构建和部署静态网站
当你准备好构建和部署静态网站时，只需执行以下命令：
npm run build
这将在项目文件夹下生成一个 out 文件夹，其中包含所有静态页面和相关资源。
你可以将该文件夹上传到任何静态网站托管服务商，如Netlify或Vercel，以部署你的静态网站。
总结
在本篇博客中，我们手把手教你使用Next.js构建静态网站。我们学习了如何创建静态页面、使用静态生成和动态路由，并了解了如何构建和部署静态网站。Next.js是一个功能强大的框架，可以帮助我们轻松构建现代静态网站。希望本文能帮助你入门Next.js，并开始构建你自己的静态网站。
本文来自极简博客，作者：蔷薇花开，转载请注明原文链接：手把手教你使用Next.js构建静态网站（Next.js&静态网站）
