開始動(dòng)手
前端搭建
首先我們最主要的就是前端的項(xiàng)目谷婆，ok，那就讓我們創(chuàng)建一個(gè)空項(xiàng)目，使用next
yarn create next-app
//使用TS
yarn create next-app --typescript
之后按照提示選擇自己的需求堪伍，如果沒有什么需求完全可以瘋狂點(diǎn)擊回車??????，然后我們就看到了項(xiàng)目的基本目錄
我們可以看到blog_fe就是我們的項(xiàng)目名稱觅闽，以及下面的各級(jí)目錄
node_modules: 項(xiàng)目所依賴的包
public： 放一些公共的資源帝雇，圖片或圖標(biāo)。
src/page: 這個(gè)就相當(dāng)于項(xiàng)目的路由蛉拙，page下的index文件就是首頁尸闸，我們可以在下面新建文件夾，這就是一個(gè)新的路由，文件夾中的index文件就是頁面
src/styles：這里面放著一些我們項(xiàng)目的CSS文件
next.config.js: 這是next項(xiàng)目的配置文件吮廉，可以參考官網(wǎng)苞尝，中有具體的詳細(xì)API
現(xiàn)在要做什么：動(dòng)代碼
參考package.json文件，我們打開終端宦芦，cd 到我們的blog_fe目錄中宙址，執(zhí)行yarn dev命令，把這個(gè)項(xiàng)目跑起來调卑。
這就是跑起來的樣子抡砂，這個(gè)頁面就是在page/index.tsx中所寫的代碼,我們刪掉所有代碼，替換成以下代碼
export default function Home() {
return (
<>111111</>
)
}
現(xiàn)在頁面內(nèi)容就變成11111了恬涧，ok你現(xiàn)在可以自由的編寫你的代碼了
樣式編寫
由于我們?cè)诖a中是一定要寫樣式的注益，UI框架我使用的是Chakra，便于后期做一些自適應(yīng)气破，CSS我使用的是CSS-IN-JS的方案聊浅，用的styled-components，你可以隨便選用现使，這里我只寫一下我的流程低匙。
First 安裝
//安裝chakra
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
//安裝styled-components
yarn add styled-components
然后我們刪掉styles/Home.module.css文件創(chuàng)建一個(gè)Home.styled.js文件,添加代碼如下
import { Box } from "@chakra-ui/react";
import styled from "styled-components";
//html的標(biāo)簽要用 stlyled.
export const YellowBox = styled.div`
background-color: yellow;
width: 100px;
height: 100px;
`;
//第三方組件的標(biāo)簽要用 stlyled()
export const BlueBox = styled(Box)`
background-color: blue;
width: 100px;
height: 100px;
`;
然后在page/index.tsx中引入他們
import { YellowBox, BlueBox } from "../styles/Home.styled";
export default function Home() {
return (
<>
<YellowBox />
<BlueBox />
</>
);
}
Ok，你先在以及掌握了Chakra 和 styled-components的用法,然后我們簡(jiǎn)簡(jiǎn)單單寫一些自己想寫的內(nèi)容碳锈，他現(xiàn)在變成了這個(gè)樣子
那么現(xiàn)在顽冶，問題來了
現(xiàn)在我們發(fā)現(xiàn)了一個(gè)很大的問題，在頁面多次刷新售碳，或者URL改變的時(shí)候樣式會(huì)失效 emm........,費(fèi)勁千辛萬苦之力强重，終于找到了解決的辦法
問題原因：Next是一個(gè)SSR的框架，他會(huì)在服務(wù)端渲染出HTML贸人，然后返回給客戶端间景，在服務(wù)端并沒有樣式給他渲染。
解決辦法：參考styled-components官網(wǎng)艺智，我們將_document.tsx文件的代碼改成官方給的方法
import Document, { DocumentContext, DocumentInitialProps } from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static async getInitialProps(
ctx: DocumentContext
): Promise<DocumentInitialProps> {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
}
那么現(xiàn)在倘要，問題解決了，我們又可以愉快的編程了十拣。
