👋 Hello, I'm Jessie

我是一名充满热情的全栈开发者、创业者和开源项目作者，并参与多个成功的创业项目。热衷于分享技术见解、旅行攻略和生活感悟，现居中国上海，活跃于GitHub和Twitter等平台。

技术文章

涵盖广泛的技术主题，从基础知识到高级应用，提供详细的教程和深入的分析。

旅行攻略

全面的旅行指南和建议。

生活感想

个人的生活经历和思考。

最新文章

从输入URL到页面展示发生了什么

本文详细介绍了从输入URL到页面展示的整个HTTP请求流程，包括请求的构建、缓存查找、TCP连接建立、HTTP请求发送、服务器处理请求及返回结果等九个阶段。还探讨了浏览器缓存的作用、TCP三次握手的必要性以及如何通过Cookie实现用户登录状态的管理，最后回答了一些常见问题，如站点加载速度快的原因和UDP与TCP的优缺点。

03.【个人网站】如何做网站自定义页面 URL 映射

pageUrlOverrides 是一个配置对象，用于在 Notion 集成中定义自定义页面 URL 映射，以替换自动生成的 URL。它有助于 SEO 优化和用户体验。示例中展示了如何将 Notion 页面 ID 映射到更友好的自定义 URL，并提供了一个清理页面 URL 映射的函数 cleanPageUrlMap，确保映射的有效性。

02.【个人网站】如何在Next中集成Notion数据库

在Next.js项目中集成Notion数据库的步骤包括获取Notion API密钥和数据库ID、安装Notion官方SDK、设置Notion客户端、获取数据库内容、部署与验证，以及使用封装的Notion API进行交互。通过这些步骤，可以有效地将Notion作为内容管理系统，并利用react-notion-x组件渲染Notion页面，提升代码的可维护性。

01.【个人网站】如何使用Notion作为数据库进行全栈开发

使用 Notion 作为数据库进行全栈开发的步骤包括注册 Notion 账号、获取 Notion API Token、创建数据库页面并配置相应的列。文中详细介绍了如何创建新集成、共享数据库权限以及获取数据库ID，以便进行数据管理和展示。

Next.js 是一个用于构建 React 应用的框架，它提供了服务端渲染(SSR)和静态网站生成(SSG)的功能，能够提升页面加载速度和 SEO 效果。通过自动化路由系统、数据获取策略（如 getStaticProps 和 getInitialProps）以及增量静态生成 (ISR)，Next.js 能够灵活地生成静态页面或根据需求进行服务器端渲染。它非常适合用于内容不频繁变化的博客、作品集、文档等静态网站，同时还能支持动态路由和嵌套路由。此外，Next.js 支持 API 路由，可以将后端功能集成到应用中。

Next踩坑记

实际开发中遇到的Next相关的bug，记录下来和大家分享

06.【个人网站】使用Mailchimp做网站邮件订阅功能

Mailchimp 是一个流行的电子邮件营销平台，提供多种功能，如受众管理、自动化和分析报告。它的免费计划适合小型企业，允许最多 500 个联系人和每月 1,000 封邮件。文中还详细介绍了如何通过 Mailchimp API 集成邮件订阅功能到 Next.js 项目中，包括创建账户、获取 API Key、编写订阅函数和创建 API 路由。Mailchimp 的强大功能和免费计划使其成为初学者的理想选择。

05.【个人网站】基于i18n在Next项目中搭建国际化网站

本文分享了如何在Next.js项目中使用i18n实现国际化网站，包括依赖安装、项目结构、配置文件、国际化文件的设置，以及组件的使用示例。此外，还提供了常见错误及其解决方案，确保服务器端和客户端的语言设置一致。

Notion踩坑记

记录实际开发中遇到Notion的报错问题

04.【个人网站】如何使用 Vercel 快速部署个人网站 | 全流程指南

Vercel 是一个专注于前端开发的平台，提供简单快速的静态网站和前端框架应用部署服务。其主要特点包括一键部署、自动化 CI/CD、全球 CDN、预览部署、自定义域名和无服务器函数等。适用于静态网站、单页应用、服务器端渲染应用及电子商务网站。部署流程包括注册、创建项目、导入 Git 仓库、配置项目和管理监控。Vercel 使开发者能够专注于代码，而无需担心部署和性能优化问题。

【面试精选】TypeScript 常见8道面试题

本文详细介绍了TypeScript的优势、与JavaScript的主要区别、基本数据类型、泛型、unknown与any的区别、readonly修饰符与const关键字的区别、装饰器的使用及其类型，以及interface与type的区别。TypeScript通过静态类型检查、增强的代码编辑体验和更好的工具支持，提高了代码的可维护性和开发效率。

【ES6系列】解构赋值：提升代码优雅度的魔法技巧 | JavaScript 简化赋值方式

解构赋值是JavaScript中的一项强大功能，可以使代码更加简洁、易读。在这篇文章中，我们将深入探讨解构赋值的基本概念、进阶用法以及实战应用，包括如何通过解构赋值简化数组和对象的提取，优化函数参数的传递，并通过实际案例展示如何用解构赋值处理复杂的API数据

【软考】程序员中级软件工程师备考分享

中级软件工程师备考分享，包含详细的备考计划、学习顺序和必考知识点。适合自学备考的考生，提供从学习资料到刷题策略的完整路径，并结合实际经验总结出高效备考方法，助力顺利通过考试。

10.【个人网站】Next.js 项目性能优化全攻略：从图片加载到 JavaScript 减少

在现代网站开发中，优化图片和减少未使用的JavaScript对于提升网站性能至关重要。本文详细介绍了如何在Next.js项目中使用next/image组件优化图片资源，并通过动态导入、按需加载等技术减少未使用的JavaScript，进而提升网站加载速度和用户体验。我们还探讨了通过预先连接外部资源和启用缓存来加速加载第三方服务如Google Ads。

09.【个人网站】在 Next.js 中集成百度翻译：无需额外的 Node.js 服务器实现安全翻译功能

将百度翻译功能集成到Next.js应用中，无需单独的Node.js环境。通过定义API路由、服务器端翻译逻辑和客户端集成，确保API密钥安全并实现便利的翻译功能。使用标准的Next.js命令即可运行应用，翻译功能完全集成，无需额外脚本。

FAQs

你能从这个博客中获得什么？

在这个博客中，我会分享技术见解、旅行攻略和生活感悟，技术分享主要包括 Next.js、React 和 Node.js 等前端技术，搭建高效、美观、用户友好的 web 应用，旅行攻略包括国内外旅游攻略详情

为什么要有这个博客？

我对编程和技术分享的热爱促使我创建了这个博客。这里是我记录开发历程、分享技术技巧，并提供深入的编程指南的平台。通过这个博客，我希望与各位开发者建立联系，分享有价值的见解，并提供实用的建议，帮助大家提升编程技能。我相信技术能够改变世界，创造更好的未来。我希望我的博客能成为你编程学习的灵感和信息来源。

针对技术开发，使用的工具有哪些？

编辑器：Visual Studio Code,版本控制：Git & GitHub,框架和库：Next.js, React, Node.js, Tailwind CSS,开发环境：Docker, Vercel

关于我

My desire to practice my skills and share my acquired knowledge fuels my endeavors.

联系 : znjessie858@gmail.com