Next와 블로그를 만듭니다.js, React, Material UI 및 Typescript
본문은 처음으로 devx.sh에 발표되었다
내 다음.js 블로그--모든 것이 어떻게 시작되었는지
마지막으로 이것이 바로 제 블로그입니다. 제가 좋아하는 기술과 제가 매일 사용하는 기술을 적으세요.많은 개발자들과 마찬가지로, 나는 나의 블로그를 위해 미리 구축된 해결 방안을 선택하고 싶지 않다.반대로 나는 스스로 그것을 만들고 싶다. 그러면 엔진 뚜껑 아래에서 무엇을 하는지 진정으로 이해할 수 있을 것이다.물론 나는 이미 이 항목에 익숙해졌다.
저는 거의 매일 업무 중에 React을 사용하기 때문에 이 프레임워크를 제 블로그의 핵심으로 선택했습니다.이것은 블로그이기 때문에 정적 내용을 제공합니다. 저는 Next.js을 서버에 이 내용을 생성하는 해결 방안으로 선택했습니다. 블로그의 페이지를 방문할 때마다 나타나는 것이 아니라.이것은 React 및 기타 단일 페이지 프레임워크를 기반으로 하는 응용 프로그램이 일반적으로 진행하는 클라이언트 렌더링과 크게 다르고 현저한 성능 향상을 제공한다.추가 설명: 다음 단계.js는 static generation을 지원할 뿐만 아니라, 이 응용 프로그램도 server-side rendering을 가능하게 합니다. 이것은 서버가 요청할 때마다 내용을 생성한다는 것을 의미합니다.이것은 필요할 수도 있다. 예를 들어, 항상 데이터베이스에서 최신 데이터를 방문하지만, 이것은 우리가 반드시 처리해야 할 목적이 아니다.
블로그 사용자 인터페이스에 튼튼한 기초를 닦기 위해 저는 Material-UI을 선택했습니다.이러한 프레임워크가 Next와 잘 어울리도록 일부 구성이 필요하다는 사실이 입증되었습니다.js.그러나 다음 단계와 마찬가지로 통합 Typescript은 매우 간단하다.js는 필요한 모든 절차를 책임진다.
다음을 설정합니다.js 블로그 프로젝트
너는 https://github.com/FelixMohr/nextjs-material-ui-blog에서 이 글에 표시된 전체 코드를 찾을 수 있다
다음.Typescript가 있는 js
새로운 거 시작해. 다음 거.js 프로젝트는
npx create-next-app을 실행하는 것처럼 간단합니다.이 명령은 사용할 기본 항목 구조를 설정합니다.익숙한 create react app 프로젝트와 같이CreateNext 응용 프로그램은 자동으로 패키지에 스크립트를 추가합니다.json은 프로젝트를 구축하거나 개발 모드에서 프로젝트를 실행합니다.실행하려면 yarn dev을 실행하십시오.프로젝트에 Typescript를 통합하려면 빈 tsconfig를 만듭니다.json(touch tsconfig.json).다음.js에서 이 파일을 검사하고 초기화합니다.현재 @ types/node와 @ types/react, 물론 typescript를 개발 의존 항목에 추가합니다.이 노드 유형을 사용하는 이유는 렌더링에 사용할 서버 쪽 코드를 작성하기 위해서입니다. 거기에는
fs과 path 등 모듈이 필요합니다.프로젝트의 모든 Javascript 파일의 파일 확장자를 (으)로 변경할 수 있습니다.ts 또는.tsx는 이제 Typescript를 사용하기 시작합니다. 더 이상 절차가 필요 없습니다.
Material UI를 Next와 통합합니다.js
다음 단계는 좀 더 복잡하게 해야 한다.js는 Material UI와 통합됩니다.
우선, 필요한 모든 의존항과 개발자 의존항을 설치한다.
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/styles": "^4.10.0",
...
"@types/material-ui": "^0.21.8",
그럼 뭘 해야 될까요?기본적으로 다음 단계를 따라야 합니다.
1. 사용자 정의 파일/페이지/문서를 만듭니다.tsx 및 채우기를 다음과 같이 추가합니다.
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/core/styles';
import theme from '../src/theme';
export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
<meta name="theme-color" content={theme.palette.primary.main} />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,500,700&display=swap" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,500,700&display=swap"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
MyDocument.getInitialProps = async (ctx) => {
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
};
};
이렇게 하면 클라이언트가 페이지를 받을 때 우리는 어떠한 깜빡임도 피할 수 있다.만약 우리가 상술한 절차를 건너뛴다면, 클라이언트는 먼저 서버에 나타난 페이지를 표시한 다음에 자신의 스타일을 주입할 것이다. 그러면 깜빡일 수 있다.
이 문서에 형식을 마음대로 추가하십시오. 원본 저장소에 저장합니다. 더 이상 수정할 필요가 없기 때문입니다.
2. 당신의 응용 프로그램에서tsx,
useEffect 갈고리를 적용하여 클라이언트 응용 프로그램에서 서버측이 주입한 CSS를 제거합니다. useEffect(() => {
const jssStyles = document.querySelector('#jss-server-side')
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles)
}
}, [])
이 두 단계의 역할을 더 잘 이해하기 위해서 우리는 모든 문서가 생성한 HTML 페이지를 볼 수 있다.상단에는 다음과 같은 섹션이 포함되어 있습니다.
<style id="jss-server-side">.MuiSvgIcon-root {
fill: currentColor;
width: 1em;
height: 1em;
display: inline-block;
font-size: 1.5rem;
transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
flex-shrink: 0;
user-select: none;
}
.MuiSvgIcon-colorPrimary {
color: #0f4c75;
}
.MuiSvgIcon-colorSecondary {
color: #3282b8;
}
<!-- ... -->
</style>
다음과 같은 항목을 볼 수 있습니다.
.MuiSvgIcon-colorPrimary {
color: #6886c5;
}
일반적으로 구성 요소 중 클라이언트에서만 실행할 수 있는 설정 코드가 있다면useEffect 갈고리와 빈 의존 항목 그룹을 사용할 수 있습니다.그러나, 이것은 가능한 한 적게 진행해야 한다. 그렇지 않으면 우리는 페이지를 미리 보여주는 장점을 잃고, 클라이언트는 최소한의 자바스크립트 코드만 실행할 수 있다.
참고로 다음과 같은 경고가 표시되면 앞서 언급한 두 단계를 통해 해결됩니다.
Warning: Prop 'className' did not match. Server: "MuiTypography-root-246 MuiTypography-title-252 MuiTypography-colorInherit-265 PageComponent-flex-207" Client: "MuiTypography-root-44 MuiTypography-title-50 MuiTypography-colorInherit-63 PageComponent-flex-5"
재료 UI 주제를 사용하여 블로그에 주제 추가
기본적인 프로젝트 설정에 관해서는 우리가 지금 모두 완성했으니 다음 주제를 시작할 수 있다.js 응용 및 Material-UI themes.너는 아마도 우리의 파일을 알아차렸을 것이다.tsx에서 선택한 테마를 사용했습니다:
<meta name="theme-color" content={theme.palette.primary.main} />
meta 표시를 추가로 토론할 것이다. 이 표시들은Next동적으로 추가할 수 있다.js. theme-color 값은 화면 주위의 UI 스타일을 설정하여 사용자 경험을 향상시키는 방법을 에이전트에게 알려줍니다.
사진 출처: Icons & Browser Colors, 구글이 만들고 공유하며Creative Commons 4.0 서명 허가서에 기술된 조항에 따라 사용합니다.
나는 내 블로그에서 사용자로 하여금 어둠과 광명 모델 사이에서 선택을 하게 하고 싶다.우리는 다음 글에서 어떻게 toggling the theme을 실현하는지 볼 것이다.그래서 나는 src/theme/theme에서 어두운 주제와 밝은 주제를 썼다.ts:
import { createMuiTheme, ThemeOptions } from '@material-ui/core'
export const paletteColorsDark = {
primary: '#0f4c75',
secondary: '#3282b8',
error: '#E44C65',
background: '#1b262c',
text: '#bbe1fa',
}
export const paletteColorsLight = {
primary: '#6886c5',
secondary: '#ffe0ac',
error: '#E44C65',
background: '#f9f9f9',
text: '#050505',
}
const options = (dark: boolean): ThemeOptions => {
const paletteColors = dark ? paletteColorsDark : paletteColorsLight
return {
palette: {
type: dark ? 'dark' : 'light',
primary: {
main: paletteColors.primary,
},
// ...
}
}
}
export const darkTheme = createMuiTheme(options(true))
export const lightTheme = createMuiTheme(options(false))
Reference
이 문제에 관하여(Next와 블로그를 만듭니다.js, React, Material UI 및 Typescript), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/felixmohr/setting-up-a-blog-with-next-js-react-material-ui-and-typescript-2m6k텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
