React의 프레임, Next입니다.js 입장!
14461 단어 JavaScriptNext.jsWebtech
개시하다
Next.js는 정식 환경을 위한 React 프레임워크로 주로 다음과 같은 특징이 있다.
특징.
이미지 최적화
버전 10.0.0부터 지원됩니다.
찾아보는 브라우저의 크기에 따라 WebP를 지원하는 브라우저에 저것 또는 lazy load를 보냅니다.
사용법
import Image from 'next/image'
function Home() {
return (
<>
<h1>My Homepage</h1>
<Image
src="/me.png"
alt="Picture of the author"
width={500}
height={500}
/>
<p>Welcome to my homepage!</p>
</>
)
}
export default Home
국제화 루트
버전 10.0.0부터 지원됩니다.
브라우저가 설정한 언어를 특정 도메인으로 라우팅합니다.
사용법
// next.config.js
module.exports = {
i18n: {
// These are all the locales you want to support in
// your application
locales: ['en-US', 'fr', 'nl-NL'],
// This is the default locale you want to be used when visiting
// a non-locale prefixed path e.g. `/hello`
defaultLocale: 'en-US',
// This is a list of locale domains and the default locale they
// should handle (these are only required when setting up domain routing)
// Note: subdomains must be included in the domain value to be matched e.g. "fr.example.com".
domains: [
{
domain: 'example.com',
defaultLocale: 'en-US',
},
{
domain: 'example.nl',
defaultLocale: 'nl-NL',
},
{
domain: 'example.fr',
defaultLocale: 'fr',
// an optional http field can also be used to test
// locale domains locally with http instead of https
http: true,
},
],
},
}
Next.js 분석
버전 10.0.0부터 지원됩니다.
실제 사용되는 장치에서 정보를 얻어 웹 Vitals 등의 성능을 측정할 수 있습니다.
제로 구성
파일 설정 등이 없습니다.js를 시작할 수 있습니다.
사용법
$ yarn create next-app
$ yarn add next react react-dom
$ vim package.json
# scripts 部分を以下のように編集します
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
$ pages/index.js
# 以下のようにします
function HomePage() {
return <div>Welcome to Next.js!</div>
}
export default HomePage
$ yarn dev
혼합 SSG·SSR
getStaticProps
구축할 때 데이터를 가져오고 이 데이터를 props로 사용합니다.
다음과 같은 경우에 사용할 수 있습니다.
getStaticPaths
특히 동적 라우팅 시 렌더링됩니다.
다음과 같은 경우에 사용할 수 있습니다.
getServerSideProps
요청마다 데이터를 가져와 렌더링합니다.
다음과 같은 경우에 사용할 수 있습니다.
ISR（Incremental Static Regeneration）
Next.js에서, 구축 후 페이지를 만들고 업데이트하지 않을 수 있습니다.
사용하려면 getStaticPropos의 반환값에revalidate를 추가하십시오.
이revalidate에 설정된 시간 캐시만 캐시하고 캐시가 끝난 후 백엔드에서 데이터를 업데이트합니다.
Type Script 지원
Next.js 응용 프로그램을 만들 때 다음과 같은 방법으로 Type Script를 지원하는 코드를 생성할 수 있습니다.
$ yarn create next-app --typescript
신속하게 정신을 회복하다.
버전 9.4가 활성화되어 기본적으로 유효합니다.
빠른 리셋은 export의 구성 요소에서만 수정할 때 이 구성 요소만 다시 렌더링합니다.
export가 없는 파일을 수정하면 이 파일을 사용하는 모든 구성 요소가 업데이트됩니다.
파일 시스템 경로
Next.js에서 페이지 디렉터리 아래 설정된 파일을 보면 경로가 진행됩니다.
다음 라우트를 수행합니다.
API 라우팅
페이지/api 디렉토리 아래 구성 파일을 사용하여 API를 정의할 수 있습니다.
사용법
export default (req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'application/json');
res.end(JSON.stringify({name: 'John Doe'}));
};
CSS 지원 구성
css 파일을 가져오면 스타일을 적용할 수 있습니다.
사용법
import '../styles.css';
// この default export は、新たに作成した `pages/_app.js` で必要になります。
export default function MyApp({Component, pageProps}) {
return <Component {...pageProps} />;
}
코드 분할과 밴드 링
Next.js에서 자동으로 코드 분할과 밴드 링을 진행합니다.
간편한 이동성
다음 순서에 따라 간단하게 구축할 수 있다.
$ npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
$ cd nextjs-blog
$ npm run dev
끝말
Next.제이스가 어떤 물건인지 대충 알 것 같아서요.
특히 성능 관점에서 SSR과 SSG를 잘 조합해 애플리케이션을 제작할 수 있다면 더 좋은 사이트를 만들 수 있을 것 같다.
다음엔 이거야. 넥스트.응용 개발을 할 수 있는 곳을 js로 쓰고 싶습니다.
통지하다
웹 사이트, 도구, LP 작성
이쪽에서 문의하실 수 있어요.편하게 문의해주세요.
참고 자료
Reference
이 문제에 관하여(React의 프레임, Next입니다.js 입장!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/ryoka419319/articles/82e92b209a9fc9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
