Nextjs 博客项目搭建：经验与坑全记录

rebel
403 阅读4分钟

搭建博客契机与技术准备🎯

最近😎想做个博客，一直技术栈用的是vue，所以想用 react 框架来实现，之前学过 Next.js 但没怎么实践，正好趁这个机会复习。发现 Next.js 官网更新成app-router了😲，就跟着next-learn重新学了一遍。

项目起航⛵️

初始化项目

普普通通的起手npx create-next-app@latest，按照官网上的步骤一步一步来。
你都让我用pnpm了，为啥还用npx 。
直接一手pnpx create-next-app@latest。接下来yes就完事儿了

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

加佐料

先瞄一眼官方的包有些啥

截屏.png

少了一些习惯用的插件加上 .editorconfig和.gitigonre，具体配置就看个人喜好啦，文末会贴上github地址可以参考我的

touch .editorconfig
touch .gitignore

个人用tailwindcss习惯加上类名排序插件prettier-plugin-tailwindcss，这个插件依赖prettier实现所以顺手也把prettier装上

pnpm add -D prettier prettier-plugin-tailwindcss
touch .prettierrc
touch .prettierignore

prettier-plugin-tailwindcss需要在prettier配置里面添加插件,顺手也把prettier配置上

//.prettierrc
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "lf",
  "jsxSingleQuote": false,
  "bracketSameLine": false,
  "plugins": ["prettier-plugin-tailwindcss"]
}

//.prettierignore
/.next/
/node_modules
.env*.local

为了解决prettier和eslint冲突问题还要再装两个插件eslint-config-prettier和eslint-plugin-prettier

eslint-config-prettier的主要作用是关闭 ESLint 中与 Prettier 冲突的规则

eslint-plugin-prettier的作用是将 Prettier 的规则作为 ESLint 的规则来运行。

pnpm add -D eslint-plugin-prettier eslint-config-prettier

两个合体就能解决冲突问题，配置也很简单。顺口一提写这篇文章的时候查看了一下两个插件的文档才发现，其实只需要配置'plugin:prettier/recommended'这个属性就行了，把它放在最后一个覆盖掉eslint的属性，他起的作用是：

  • 启用 prettier/prettier 规则。
  • 禁用 arrow-body-style 和 prefer-arrow-callback 规则，因为它们与这个插件有冲突
  • 启用 eslint-config-prettier 配置，这将关闭与 Prettier 冲突的 ESLint 规则。
import { FlatCompat } from '@eslint/eslintrc';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  // 继承多个ESLint配置
  ...compat.extends(
    'next/core-web-vitals', // Next.js的核心Web性能规则
    'next/typescript', // Next.js的TypeScript规则
    //'eslint-config-prettier',  关闭所有与Prettier冲突的ESLint规则 这个是不需要的
    'plugin:prettier/recommended' // 启用prettier推荐的规则集
  ),
  {
    // 自定义规则配置
    rules: {
      '@typescript-eslint/no-explicit-any': ['off'], //允许使用any
      '@typescript-eslint/ban-ts-comment': 'off', //允许使用@ts-ignore
      '@typescript-eslint/no-non-null-assertion': 'off', //允许使用非空断言
      '@typescript-eslint/no-var-requires': 'off', //允许使用CommonJS的写法
      'no-console': [
        //提交时不允许有console.log
        'warn',
        {
          allow: ['warn', 'error'], // 允许使用console.warn和console.error
        },
      ],
      'no-debugger': 'warn', // 使用debugger时给出警告
    },
  },
];

export default eslintConfig;

最后在package.json中加入format命令就可以了😌

    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\""

还有一件事忘记给tailwind加autoprefix了👻

pnpm add -D autoprefixer

加到postcssconfig里面

module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } }

域名和服务器

在 CF 上花了几刀买了域名，懒得折腾服务器，就把静态网站部署到 Vercel 上了，它一键部署功能很方便。 不过后来绑定域名时遇到问题，网站一直重定向。查了Vercel文档才知道，Cloudflare有各种服务，根据其配置，可能会阻止ACME协议验证检查，导致Vercel无法正确签发TLS证书 设置ssl严格就行了

绑定过程很简单

  1. 注册一个vercel账号，我是用github登陆的所以直接关联上了
    截屏.png
  2. GitHub上新建个库，然后把本地推上去。最后在vercel里面选中刚才的库import进去

img.png 3. 选中刚才的库，在setting>domains 添加你自己的域名，并在你的域名服务提供商处设置vercel给你的记录就行了，我是用cloudflare买的，所以在上面添加就搞定了🤝

还有一件事

贴上GitHub地址，还在开发中... 后续也会记录开发的过程和问题

avatar
文章
阅读
粉丝