最近想实践下ssr 就打算用nextjs 做一个人博客 ， vercel 部署 提供免费域名，来学习实践下ssr ssg
nextjs 一个轻量级的react服务端渲染框架
vercel 由 Next.js 的创建者制作 支持nextjs 部署 免费静态网站托管
npx create-next-app project-name --ts
利用脚手架生存默认初始化框架 大概文件夹结构包括
pages 页面根路径
pages/api 请求服务
pages/_app.tsx 项目根入口
pages/_document.tsx
pages/index.tsx 默认首页
styles 全局页面样式
public 静态资源
yarn dev 启动服务端口默认3000
利用nextjs 内置的 文件系统路由 可以创建一个新页面 不需要路由库 会自动根据pages目录创建路由
在pages下面新建posts文件夹 再新建posts/first-post.tsx文件
export default function FirstPost() {
return <h1>First Post</h1>;
}
http://localhost:3000/posts/first-post 访问 能看到这个页面
Link 链接组件 使用js 进行浏览器导航切换
import Link from 'next/link';
export default function FirstPost() {
return (
<>
<h1>First Post</h1>
<h2>
<Link href="/">Back to home</Link>
</h2>
</>
);
}
特性
export default function Post({postData}:any) {
return <div>
{postData.title}
<br />
{postData.id}
<br />
{postData.date}
<br />
<div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
</div>
}
// 动态路由 定义要静态生成的路径列表
export async function getStaticPaths() {
const paths = getAllPostIds(); // 获取所有的post的ID 列表
return {
paths,
fallback:false // false 如果没有路径匹配 返回404
// true
}
}
export async function getStaticProps({params}:any) {
const postData = await getPostData(params.id); // 获取当前ID的文章详情
return {
props: {
postData
}
}
}
在根目录下新建lib/posts.ts 文件 里面的方法是从根目录下posts文件夹获取md文件 生成数据
const postsDirectory = path.join(process.cwd(),'posts');
export function getAllPostIds() {
const fileNames = fs.readdirSync(postsDirectory);
return fileNames.map(fileName => {
return {
params: {
id: fileName.replace(/\.md$/,'')
}
}
})
}
export async function getPostData(id:string) {
const fullPath = path.join(postsDirectory,`${id}.md`);
const fileContents = fs.readFileSync(fullPath,'utf8');
const matterResult = matter(fileContents);
const contentHtml = await remark().use(html).process(matterResult.content)
return {
id,
contentHtml:contentHtml.toString(),
...matterResult.data
}
}
