Next.js 시작하기
npx create-next-app@latest
# 또는
원사 다음 앱 만들기
'추천 관련글,# 또는
pnpm 다음 앱 만들기
npx create-next-app@latest –typescript# 또는
원사 생성 다음 앱 –typescript
# 또는
pnpm 다음 앱 만들기 –typescript
Next.js가 무엇인가요?
- Next.js는 Vercel의 React 라이브러리의 프레임워크입니다.
- 클라이언트 측 및 서버 측 기술을 모두 포함하는 올인원 솔루션입니다.
질문 1. 라이브러리와 프레임워크의 정의와 차이점은 무엇입니까?
도서관
- 함께 사용할 수 있는 특정 기능의 모듈화를 의미합니다.
- 폴더 이름, 파일 이름 등에 대한 규칙이 없으며 프레임워크에 비해 무료입니다.
– 요컨대 사용자가 파일 이름, 구조 등을 결정하고 모든 결정을 내립니다.
액자
- 함께 사용할 수 있는 특정 기능의 모듈화를 의미합니다.
- 폴더 이름, 파일 이름 등에 대한 규칙이 있으며 라이브러리보다 엄격합니다.
– 요컨대 파일명과 구조는 정해진 규칙에 따라 생성되고 따른다.
라이브러리와 프레임워크의 차이점
- 라이브러리 프레임워크 간의 주요 차이점은 “제어 역전”입니다.
라이브러리에서 메서드를 호출하면 제어할 수 있습니다.
그러나 프레임워크에서는 제어가 역전되어 프레임워크가 사용자를 호출합니다.
Next.js를 만든 이유는 무엇입니까?
블로그 게시물을 많이 읽는다면 Next.js를 사용하는 주된 이유는 SEO(검색 엔진 최적화)를 위해 서버 측 렌더링(SSR)을 활성화하는 방법 말하다
반응하다CSR(클라이언트 사이드 렌더링)을 수행합니다.
위 이미지와 같이 웹사이트를 요청하면 빈 HTML이 로드되고 스크립트가 로드되기 때문에 초기 로드 시간이 오래 걸리고 검색엔진최적화(SEO)에 취약합니다.
따라서 로그인이 필요한 대시보드나 개인 홈페이지에 적합합니다.
반면에, Next.js사전 재로딩을 통해 사전 렌더링된 데이터가 포함된 페이지를 얻을 수 있으므로 검색 엔진에서 귀하의 입지를 높이는 더 나은 사용자 경험과 SEO 이점을 제공합니다.
소환장정적 사이트 생성(SSG) 및 SSR을 활성화합니다.
또한 SSR과 CSR을 혼용하여 사용할 수도 있습니다.
질문 2. SSR과 CSR이 무엇인가요?
SSR
- 서버는 HTML을 그립니다.
- HTML을 렌더링한 후 js를 다운로드합니다.
CSR
- 클라이언트는 HTML을 그립니다.
- js를 다운로드하고 반응을 실행하기 때문에 검색 엔진 봇이 크롤링할 수 없습니다.
질문 3. Next.js 없이 SSR을 구현할 수 있습니까?
결론은 할 수 있다.
react-helmet과 같은 라이브러리로 SEO에 대응할 수 있습니다.
그러나 이미 고급 React 프로젝트에 프레임워크를 갑자기 도입하는 경우에는 다소 비용이 많이 드는 작업과 같이 깔끔하게 최고입니다.
Next.js 함수
페이지
- 경로는 페이지 폴더에 있는 파일 이름으로 결정됩니다.
페이지 만들기/about.js -> localhost:3000/about - 그러나 index.js의 경우 예외적으로 앱을 실행시키는 파일로 볼 수 있다.
localhost:3000 자체. 그 뒤에 /index를 추가하지 마세요.
라우팅
import Link from "next/link";
import { useRouter } from "next/router";
export default function NavBar() {
const router = useRouter();
console.log(router);
return (
<nav>
<Link
className="hello"
style={{ color: router.pathname === "http://luckseok." ? "red" : "blue" }}
href="http://luckseok."
>
Home
</Link>
<Link
href="http://luckseok.about"
style={{ color: router.pathname === "/about" ? "red" : "blue" }}
>
About
</Link>
</nav>
);
}- Next.js 버전 13 이후 태그 내부의 태그가 처리되지 않음
- Link에서 a를 제거하거나 Link에서 legacyBehavior를 추가해야만 사용할 수 있습니다.
- React의 useLocation()과 동일한 useRouter()라는 함수가 있습니다.
내장 CSS 지원
- Next.js를 사용하면 JavaScript 파일에서 CSS 파일을 가져올 수 있습니다.
이는 Next.js가 가져오기 개념을 JavaScript 이상으로 확장하기 때문에 가능합니다.
CSS-in-JS
- styled-jsx 번들로 격리된 범위의 CSS를 지원합니다.
목표는 불행하게도 서버 렌더링을 지원하지 않고 JS 전용인 웹 구성 요소와 유사한 “그림자 CSS”를 지원하는 것입니다.
style-jsx를 사용하는 컴포넌트는 다음과 같습니다.
<style jsx>{`
CSS 스타일..
`}</style>- 사용하면서 느낀점은 Styled 컴포넌트에 대한 반응이 비슷하다는 점이었습니다.
구성 요소 수준에서 CSS 추가
- Next.js는 (이름)입니다.
module.css 파일 명명 규칙을 사용하는 CSS 모듈 지원
Sass 지원
- Next.js를 사용하는 경우. 그리고. 모든 Sass 확장으로 Sass를 가져올 수 있습니다.
맞춤형 앱
- Next.js는 앱 구성 요소를 사용하여 페이지를 초기화합니다.
이를 재정의하고 페이지 초기화를 제어할 수 있습니다.
- 페이지 나누기 사이의 레이아웃 유지
- 페이지 탐색 시 상태 유지
- componentDidCatch를 사용한 사용자 지정 오류 처리
- 페이지에 추가 데이터 추가
- 글로벌 CSS 추가
기본 앱을 재정의하려면 아래와 같이 ./pages/_app.js 파일을 만듭니다.
export default function MyApp({ Component, pageProps }) {
return < Component {...pageProps} />- 기본 내보내기 기능의 이름은 크게 중요하지 않지만 사용자 지정하려면 파일 이름 _app.js가 필수(규칙)입니다.
맞춤형 앱(TypeScript 사용)
_app.ts가 아닌 _app.tsx 파일을 만들고 다음과 같이 만듭니다.
import type { AppProps } from 'next/app'
export default function MyApp({ Component, pageProps }: AppProps){
return < Component {...pageProps} />
}
+ 추가 파일 이름. module.css 파일 유형을 제외하고 다른 모든 CSS 파일은 _app.js에서만 가져와 사용해야 합니다.
(이는 전역 CSS 간의 충돌을 피하기 위한 것입니다.
)
계속 추가되는 기능
(Next.js) 기본 개념: Next.js란? Next.js를 사용하는 이유는 무엇입니까? Next.js의 이점은 무엇입니까?
이 게시물은 nextjs 튜토리얼과 공식 문서를 기반으로 작성되었습니다.
소개 회사에서는 Next.js를 사용하여 프로덕션을 개발하지만 저는 개념에 대해서만 많이 알고 있기 때문에 누군가는 왜 그런지 궁금해 할 것입니다.
velog.io
Next.js가 무엇인가요? 제가 사용하면서 느낀 Next.js의 장점은 무엇인가요?
Next.js가 무엇인가요? vercel에 의한 응답 프레임워크!
!
클라이언트 측과 서버 측 기술을 모두 갖춘 올인원 솔루션입니다!
API를 구현함으로써 프론트엔드 React와 Ha
shinestarforever.tistory.com