为nextjs项目添加日志

日常练习

背景

经常做全栈项目或者做过正式后端项目的开发者都知道，日志记录是一个项目不可或缺的功能。不过，经常看Next.js开源项目的朋友会发现，几乎没什么项目集成了日志模块。

但是，根据我的经验看，Next.js项目还是比较需要日志模块的，根据实际经验总结出来的原因如下有几个：

  • Serverless 平台和自己购买的服务器环境是有区别的，这就带来Next.js项目运行时不同，例如在Serverless 平台里，Next.js使用的是edge运行时，它相比于Node环境来说，缺少了一些API，这会导致偶尔出现本地运行正常，部署到Serverless 平台发现报错了。
  • 调用了第三方平台的API，当出现连接错误的情况，你去排查是第三方服务不稳定还是你的API额度用完，这都是比较麻烦了，但是如果有日志文件直接查看，定位问题就可以更快速。

安装必要Package：

1
npm install winston winston-daily-rotate-file

添加通用函数：

More...

Built Portfolio Page - 5 (Link scroll)

日常练习

Steps:

  1. Add id to different element
  2. Add scroll-mt propriety to classman

Modify Intro.tsx:

1
2
3
4
5
6
7
8
export default function Intro() {
  return (
    <section 
      id = "home"
      className='mb-28 max-w-[50rem] text-center sm:mb-0
      scroll-mt-[100rem]'
    >
....

Modify About.tsx:

1
2
3
4
5
6
7
8
9
export default function About() {
  return (
    <motion.section className='mb-28 max-w-[45rem] text-center leading-8 sm:mb-40 scroll-mt-28'
      initial={{ opacity:0, y:100}}
      animate={{ opacity:1, y:0 }}
      transition={{ delay: 0.175 }}
      id="about"
    >
...

Modify Projects.tsx

1
2
3
4
export default function Projects() {
  return (
    <section id="projects" className='scroll-mt-28'>
...

Scroll smoothly

Modify layout.tsx:

1
2
3
4
5
6
7
8
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className='!scroll-smooth'>
...

Built Portfolio Page -4 (Scroll effect)

日常练习

Steps:

  1. move project code to project component

useScroll Memo:

1
2
3
4
5
const ref = useRef<HTMLElement>(null);
const { scrollYProgress  } = useScroll({
  target: ref,
  offset:["0 1", "1.33 1"]
});
  • 创建一个 ref,用于引用某个 DOM 元素(可能在JSX中通过 ref={ref} 绑定到一个元素上)。
  • 使用 useScroll 来监听这个被引用元素的滚动情况。
  • 设置滚动动画的触发范围:从元素开始进入视口底部(“0 1”)到元素完全离开视口底部 33% 的位置(“1.33 1”)。
  • 获取 scrollYProgress 值,这个值可能随着元素的滚动而变化,范围可能是 0 到 1。

Add project component

More...

Built Portfolio Page -3 (Projects Component)

日常练习

Steps:

  1. Add project component

Add projects component

add src/components/Projects.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import React from 'react'
import SectionHeading from './Section-heading'
import { projectsData } from '@/libs/data'
import Image from 'next/image';

export default function Projects() {
  return (
    <section>
      <SectionHeading>
        My Projects
      </SectionHeading>
      <div>
        {projectsData.map((project, index)=>( 
          <React.Fragment key={index}>
            <Project  {...project} />
          </React.Fragment>
        ))}
      </div>
    </section>
  )
}

type ProjectProps = (typeof projectsData)[number]; 

function Project({title,description,tags,imageUrl } : 
ProjectProps) {
  return(
    <section className="group bg-gray-100 max-w-[42rem] border border-black/5
    overflow-hidden sm:pr-8 relative sm:h-[20rem] mb-3 sm:mb-8 last:mb-0 even:pl-8
    hover:bg-gray-200 transition">
      <div className='py-4 pb-7 px-5 sm:pl-10 sm:pr-2 sm:pt-10 sm:max-w-[50%] 
      flex flex-col h-full group-even:ml-[18rem]'>
        <h3 className='text-2xl font-semibold'>{title}</h3>
        <p className='mt-2 leading-relaxed text-gray-700'>{description}</p>
        <ul className='flex flex-wrap mt-4 gap-2 sm:mt-auto'>
          {tags.map((tag,index) => (
            <li className='bg-black/[0.7] px-3 py-1 text-[0.7rem] upppercase
            tracking-wider text-white rounded-full' 
            key={index}
            >
              {tag}
            </li>
          ))}
        </ul>
      </div>
      <Image 
        src={imageUrl} alt="Project I worked on" quality={95} 
        className='absolute top-8 -right-40 w-[28.25rem] rounded-t-lg shadow-2xl
        transition
        group-hover:scale-[1.05]
        group-hover:-translate-x-3
        group-hover:translate-y-3
        group-hover:-rotate-2

        group-even:group-hover:translate-x-3
        group-even:group-hover:-translate-y-3
        group-even:group-hover:rotate-2
        group-even:right-[inital] group-even:-left-40'
      />
    </section>
  )
}

More...

Mysql Windows Docker Setup

日常练习

背景

我发现在window上直接装mysql ，比在虚拟机上要方便。

步骤

首先先下载docker for windows：在官网 下载即可。安装完毕后，打开命令行，执行以下语句。

Pull Image

1
docker pull mysql:8.0.34

这里8.0.34为mysql的版本，你可以选择你喜欢的版本，不建议直接用最新版

Create Volume

1
docker volume create --driver local --opt device=C:\10.VM\data\mysql01 --opt type=none --opt o=bind mysql01

Start Container

1
docker run --restart=always -p 3501:3306 --name mysql01 -v mysql01:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=xxxxxx -d mysql:8.0.34

Docker 设置代理

当日所学

背景

使用 proxychains 企图让 docker pull使用代理来拉取镜像，实际上没有走代理，依然很慢

对于镜像， 可以使用国内的加速镜像， 也可以用自己的代理服务器访问 dockerhub

国内镜像加速
对于国内加速镜像，直接设置镜像地址就好了：
编辑/etc/docker/daemon.json添加

1
2
3
{
"registry-mirrors": ["[https://docker.mirrors.ustc.edu.cn](https://docker.mirrors.ustc.edu.cn/)"]
}

也可以用其它镜像比如阿里云 或者 daocloud 等等。

设置代理的方法

More...

自定义Next auth的登陆字段

当日所学

背景

用next auth可以方便的编写用户登陆逻辑，但如果我们不想用email作为登陆主字段，就要做一些定制化开发。
使用 CredentialsProvider 时，你可以完全自定义认证逻辑，包括不使用 email。你可以设置一个只使用用户名和密码的认证系统，而不需要 email。以下是如何实现这一点的步骤：

1. 配置 CredentialsProvider：

在你的 NextAuth.js 配置文件中（通常是 pages/api/auth/[...nextauth].js 或 app/api/auth/[...nextauth]/route.js），你可以这样设置 CredentialsProvider：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        username: { label: "Username", type: "text", placeholder: "jsmith" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials, req) {
        // 这里添加你的认证逻辑
        const user = await authenticateUser(credentials.username, credentials.password)
        
        if (user) {
          // 返回的对象将被保存在 JWT 的 user 属性中
          return {
            id: user.id,
            username: user.username,
            // 不包含 email 字段
          }
        } else {
          return null
        }
      }
    })
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.id = user.id
        token.username = user.username
      }
      return token
    },
    async session({ session, token }) {
      session.user = {
        id: token.id,
        username: token.username,
      }
      return session
    }
  },
  // 其他配置...
})

2. 修改类型定义：

如果你使用 TypeScript，你可能需要修改类型定义以反映这种变化。创建或编辑 types/next-auth.d.ts 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import "next-auth"

declare module "next-auth" {
  interface User {
    id: string
    username: string
  }

  interface Session {
    user: User
  }
}

declare module "next-auth/jwt" {
  interface JWT {
    id: string
    username: string
  }
}

3. 实现认证逻辑：

你需要实现 authenticateUser 函数来验证用户名和密码。这可能涉及检查数据库或其他认证服务。

请我喝杯咖啡吧~

支付宝
微信