next.js 实践中的注意事项 (长期更新中)

1.使用了Image标签的文件， 如果默认使用next.js服务器，图片会定位到 'http://domain/_next/image?url=图片地址&w=1920&q=75', 相当于用next.js服务器处理了图片。但是如果你同一个服务器上有多个next服务，那其他的服务会定位到根服务器上导致文件找不到,next.config.js也没有选项可以改，至少我现在没找到。这时候有3种方法解决

1)：不使用标签, 使用html原来的img标签

2)：使用全局写法

module.exports = { 
    images: { 
        loader: 'custom', 
        loaderFile: './my/image/loader.js',
    },
 }

export default function myImageLoader({ src, width, quality }) {
    return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

.tsx文件直接使用

<Image src="me.png" alt="Picture of the author" width={500} height={500} />

但是这方法有bug还是需要你写

3)：使用局部写法, 可以把inageLoader写成公有函数，每次调用它，其实跟第二种效果一样,而且还更便利可以随时切换

const imageLoader = ({ src, width, quality }) => { 
    return `https://example.com/${src}?w=${width}&q=${quality || 75}`} 

export default function Page() { 
    return ( 
        <Image loader={imageLoader} src="me.png" alt="Picture of the author" width={500} height={500} /> 
     )
  }

但是用loader后并没有重定向到_next/image会失去next.js服务器的处理，再加上一个服务器如果有两个相似的规则，会只走一个规则

location /_next/static {
    alias /home/home/.next/static;
    add_header Cache-Control "public, max-age=3600, immutable";
}

这里强调点，nextjs的图片处理能力很强，一张743kb的图片，使用Image可以在看不出变化的情况下压缩到68kb，原图48kb,可以压缩到5kb。 所以尽量用Image 至于多项目问题，我建议还是要多个子域名处理

2. 使用内部链接的时候用Link,外部用a标签, 好像Next13之后Link会内置a标签，但是我的是12，还是先这样用

<Link href={`/article/${post.id}`} key={post.id}>
<a className="font-semibold text-lg mt-3.5" target="_blank" href={link ?? '#'}>a标签内容</a>

3.使用Image标签width设置100%的写法

.max-w-full {
    width: 100%
}

<div className="max-w-full">
  <Image
    src={indexBg}
    width={0}
    height={0}
    sizes="100vw"
    className="w-full h-auto"
  />
</div>