nextjs 笔记

Static Generation with Data using getStaticProps

export default function Home(props) { ... }
export async function getStaticProps() {
// Get external data from the file system, API, DB, etc.
const data = ...
// The value of the `props` key will be
// passed to the `Home` component
return {
props: ...

Server-side Rendering

you need to export getServerSideProps instead of getStaticProps from your page

export async function getServerSideProps(context) {
return {
props: {
// props for your component

Static File Serving 静态文件

Next.js可以在根目录下的文件夹public下提供静态文件(例如图片)。 代码中你可以以(/)开始引用public下的文件。

例如添加 public/my-image.png 这个图片

<img src="/my-image.png" alt="my image" />

This folder is also useful for robots.txt, favicon.ico, Google Site Verification, and any other static files (including .html)!

import image

nextjs 不支持直接import image 需要安装 next-optimized-images 或者 next-images; 并且配置next.config.js

import ab from "../assets/ab.jpg"
// ab 为图片url
最新的next 11 版本支持直接import 图片:
import LogoImage from '~/assets/images/bim-logo.png';
src: "/_next/static/image/assets/images/bim-logo.cfexxxx9.png",
height: 702,
width: 2252,
blurDataURL: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgA…+/RXjYWL48wIo+RyImQAXARzogUBDGwAAAABJRU5ErkJggg=="
gatsby 和 react 支持直接import image

改变运行端口 -p 端口

更改package.json 的 scripts

"dev": "next dev -p 3200",

部署nextjs 到服务器上

如果使用了typestript,要在服务器上安装 typescript
npm install typescript -g
先cd 到next项目根目录 build 项目
yarn build
NODE_ENV=production PORT=5010 pm2 start npm --name "" -- run start
然后配置nginx 端口
到next 启动的端口
package.json里面的 scripts.start 端口配置 5010
"scripts": {
"dev": "PORT=5010 next dev",
"build": "next build",
"start": "PORT=5010 next start",
具体配置如下:(删除oneinstack 里面默认生成的其他 图片或者 js的nginx规则)
location / {
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto https;
proxy_connect_timeout 300;
proxy_send_timeout 300;
proxy_read_timeout 300;
send_timeout 300;
location ^~ /.well-known/acme-challenge/ {
default_type "text/plain";
root /data/wwwroot/;

Why are destructured environment variables undefined in Next.js

const { API_KEY } = process.env; // = undefined
const key = process.env.API_KEY; // = 'value'
In order to keep server-only secrets safe, Next.js replaces process.env.* with the correct values at build time. This means that process.env is not a standard JavaScript object, so you’re not able to use object destructuring.
// client-side React components
The value will be inlined into JavaScript sent to the browser because of the NEXT_PUBLIC_ prefix. This inlining occurs at build time, so your various NEXT_PUBLIC_ envs need to be set when the project is built

配置文件注意点 next.config.js

Next.js provide a transpileModules option in its configuration to specify which modules should be transpiled by Babel.
借助 babel 的转换,es6 的模块最终还是会转换成 commonjs 规范的模块。

使用 antd 时报错如下:
import InternalCard from './Card';
SyntaxError: Cannot use import statement outside a module
需要配置 transpilePackages属性,数组中加上 antd 及其依赖的相关模块;
module.exports = {
transpilePackages: [
// "@babel/runtime",

nextjs 取消部署时检查 typescript 格式

module.exports = {
typescript: {
// !! WARN !!
// Dangerously allow production builds to successfully complete even if
// your project has type errors.
// !! WARN !!
ignoreBuildErrors: true,