next.js博客搭建_初始化next项目（第一步）-摩杜云开发者社区

文章目录

⭐前言
⭐next初始化

TypeScript 开发项目
安装react的ui框架（tDesign）
设计布局

⭐结束

⭐前言

大家好，我是yma16，本期给大家分享next项目搭建博客的开始。
背景
因为我的博客网站https://yongma16.xyz是基于vue2搭建的，单页面应用，技术框架老旧，所以想着给我的博客网站升级。
关于next框架
Next.js是一个 React 开发框架。
特性：

直观的、基于页面的路由系统（并支持动态路由）
预渲染。支持在页面级的静态生成 (SSG) 和服务器端渲染 (SSR)
自动代码拆分，提升页面加载速度
具有经过优化的预取功能的客户端路由
内置 CSS 和 Sass 的支持，并支持任何 CSS-in-JS 库
开发环境支持快速刷新
利用 Serverless Functions 及 API 路由构建 API 功能
完全可扩展

⭐next初始化

前提条件需要安装node，关于node的安装可以查看我的笔记：
nvm管理node

TypeScript 开发项目

用npx进行创建 @latest安装最新的项目

$ npx create-next-app@latest --typescript

next.js博客搭建_初始化next项目（第一步）_javascript

我们可以发现 react、react-dom、next在创建项目的时候已经添加到依赖
next dev运行

$ next dev

next.js博客搭建_初始化next项目（第一步）_react.js_02

默认目录即路由

打开预览 localhost:300，ok没问题

next.js博客搭建_初始化next项目（第一步）_ide_03

安装react的ui框架（tDesign）

这里我使用腾讯出品的ui框架tdesing

$ npm i tdesign-react

在next.js引入
next.config.js配置

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    transpilePackages: ['tdesign-react']
  }
}
module.exports = nextConfig

_app.tsx配置

import '@/styles/globals.css'
import 'tdesign-react/dist/tdesign.css'; // 全局引入tdesign所有组件样式代码
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

设计布局

采用旧版博客的侧边导航布局

next.js博客搭建_初始化next项目（第一步）_ide_04

layout

// 主页布局样式
import React from 'react';
import { Layout } from 'tdesign-react';

const { Header, Content, Footer, Aside } = Layout;
const Home=()=>{
    return (<>
        <Layout style={{
            width:'100vw',
            height:'100vh'
        }}>
            <Aside>Aside</Aside>
            <Layout>
                <Content>Content</Content>
                <Footer>Copyright @ 2023 Tencent. All Rights Reserved</Footer>
            </Layout>
        </Layout>
    </>)
}

export default Home

效果

next.js博客搭建_初始化next项目（第一步）_前端_05

⭐结束

初始化搭建到这结束，如有不足欢迎指出！我们下篇博客见

next.js博客搭建_初始化next项目（第一步）_javascript_06