開(kāi)始動(dòng)手
前端搭建
首先我們最主要的就是前端的項(xiàng)目，ok，那就讓我們創(chuàng)建一個(gè)空項(xiàng)目，使用next
yarn create next-app
//使用TS
yarn create next-app --typescript
之后按照提示選擇自己的需求，如果沒(méi)有什么需求完全可以瘋狂點(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文件就是首頁(yè)，我們可以在下面新建文件夾，這就是一個(gè)新的路由，文件夾中的index文件就是頁(yè)面
src/styles：這里面放著一些我們項(xiàng)目的CSS文件
next.config.js: 這是next項(xiàng)目的配置文件，可以參考官網(wǎng)，中有具體的詳細(xì)API
現(xiàn)在要做什么：動(dòng)代碼
參考package.json文件，我們打開(kāi)終端，cd 到我們的blog_fe目錄中，執(zhí)行yarn dev命令，把這個(gè)項(xiàng)目跑起來(lái)。
這就是跑起來(lái)的樣子，這個(gè)頁(yè)面就是在page/index.tsx中所寫的代碼,我們刪掉所有代碼，替換成以下代碼
export default function Home() {
return (
<>111111</>
)
}
現(xiàn)在頁(yè)面內(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)在，問(wèn)題來(lái)了
現(xiàn)在我們發(fā)現(xiàn)了一個(gè)很大的問(wèn)題，在頁(yè)面多次刷新，或者URL改變的時(shí)候樣式會(huì)失效 emm........,費(fèi)勁千辛萬(wàn)苦之力，終于找到了解決的辦法
問(wèn)題原因：Next是一個(gè)SSR的框架，他會(huì)在服務(wù)端渲染出HTML，然后返回給客戶端，在服務(wù)端并沒(méi)有樣式給他渲染。
解決辦法：參考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)在，問(wèn)題解決了，我們又可以愉快的編程了。
