当前位置：首页 > news >正文

nextjs开发 + vercel 部署 ssr ssg

news 2025/9/14 14:19:14

前言

最近想实践下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></>);
}

特性

客户端导航利用js切换路由浏览器没有全面刷新速度快
代码自动分割每个页面只展示当前页面必须的东西其它页面不会提供加载快；每个页面独立互相不干扰，一个报错对其他没有影响
预获取 Link组件出现在浏览器生产环境时在后台会预先获取这个要跳转的页面当用户点击跳转页面时业务几乎同时出现
动态路由
新建posts/[id].tsx 会根据id 动态生成路由根据文章id 动态生成路由

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}
}