正好最近在看Next.js框架(Next.js 13 刚发布),正好也想换一个JAMstack架构的博客,所以决定这次用Next.js从零开发自己的个人博客。 创建Next.js 项目 之前的个人博客部署在Github上,已经有了一个repo了,所以不需要再新建一个,直接从 Github 上把原来的 clone 下来建立一个新的 branch 就可以了。 # 克隆 shenlu...
* 生成nextjs识别的pages */constfs=require('fs')constpath=require('path')constMarkdownIt=require('markdown-it')constaxios=require('axios')const{mdDir,}=require('../config')const{rebuild,copyFolder}=require('./utils')constmd=newMarkdownIt({html:true,linkify:true,})consthandleMarkdownBody=(...
然后我们可以把nextjs的项目的tsconfig.json文件修改一下 代码语言:javascript 复制 {"extends":"../../tsconfig.json","compilerOptions":{"target":"es5","lib":["dom","dom.iterable","esnext"],"allowJs":true,"strict":true,"noEmit":true,"esModuleInterop":true,"module":"esnext","moduleResolu...
Breadcrumbs nextjs-blog /posts / ssg-ssr.md Latest commit vic-cristina first commit e3bee18· Nov 15, 2022 HistoryHistory File metadata and controls Preview Code Blame 19 lines (13 loc) · 1.01 KB Raw titledate When to Use Static Generation v.s. Server-side Rendering 2020-01-02 We ...
使用的nextra搭建博客失败后,进而尝试next examples 中的 [blog-starter] 搭建,顺便看了遍代码。 原理:博客页面框架需要前端搭建,使用next.js的getStaticProps实现ssr. 项目的主要依赖,如下所示: //package.json{..."dependencies":{"next":"latest","react":"^18.2.0","react-dom":"^18.2.0","remark":"...
在apps的目录执行命令创建NextJS的web项目 cd web pnpm run dev # 打开链接http://127.0.0.1:3000/,这个时候就可以打开我们启动的页面了 添加CMS管理后台 切换到apps的目录执行安装strapi命令,演示作用我就没展示mysql的链接了,大家有兴趣我可以再下一个文章去写一下,或者去strapi官网看一下如何使用别的数据。
之后创建 details/[id]/page.tsx 页面,这里 [id] 代表了一个动态参数,会根据传递过来的 id 不同来进行变化,在 Next.js 中还有其他可选参数等,这里不展开一一介绍了,之后重点讲一下详情页面要怎么展示 md 内容。 import{useMemo}from"react";importdata,{classification}from"@blog/side-effect";interfaceParams...
This blog is a Next.js(opens in new tab) application. With Next, you have a few different options when it comes to page rendering: you can choose to do it “on-demand” (server-side rendering) or ahead of time (static site generation). I've opted to build all the blog posts ahead...
1、创建Next.js项目 要创建 Next.js 应用程序,请打开终端,cd进入到要在其中创建应用程序的目录,然后运行以下命令: 代码解读 npx create-next-app@latest--typescriptailjx-blog 1. 上述代码表示:通过create-next-app创建名为ailjx-blog...
进入nextjs-blog-1,用命令行启动项目yarn dev。 看到下面这个页面?,就说明你的项目启动成功啦。 下面我们为项目加上TypeScript! 启动TypeScrip! 第一步就是安装 TypeScript。 代码语言:javascript 复制 yarn global add typescript 创建tsconfig.json 然后我们运行tsc \--init,得到 tsconfig.json,这是 TypeScript ...