Next 를 시작합니다.js는 5분 안에

Next.js는 경량급 소스 자바스크립트 프레임워크로 React 라이브러리에 구축되어 빠른 서버 사이드 렌더링을 지원하며 서버와 무관합니다(즉, 자신의 내장 HTTP 서버와 함께 사용하거나 Node.js 서버와 함께 사용).그것은 사람들이 발표한 것이다.루트는 페이지를 통해서만 완성하면 쉽고 빠르게 사이트를 구축하고 운영할 수 있다.사실 우리는 5분 혹은 더 적은 시간 안에 완성할 것이다.

Zeit 회사 설치 중

이제 NPM을 사용하여 설치합니다.js 및 그 의존항.
우선, 우리는 다음 디렉터리를 저장하기 위해 디렉터리를 만들 것이다.js 프로젝트 및 투입:

mkdir my-portfolio-site
cd my-portfolio-site

그리고 우리는 package.json 파일로 그것을 초기화하고 y 로고를 사용하여 문제를 계속 실행하고 건너뛸 것입니다. npm init -y.
지금 우리는 다음 것을 설치할 준비를 하고 있다.js:

npm install react react-dom next

다음예외를 제외하고는 js가 당신의 프로젝트를 어떻게 구축하는지에 대해 특별히 자신의 의견을 고집하는 것은 아니다.모든 실제 웹 페이지는 pages 폴더에 넣어야 하기 때문에 우리는 그것을 계속 만들 것입니다. mkdir pages.
마지막으로 다음 스크립트를 초기화하기 위해 실행 스크립트 언어 업데이트 package.json 를 계속 사용합니다.js 응용 프로그램.package.json 파일을 열고 scripts 아래에 다음을 추가합니다.

"dev": "next",
"build": "next build",
"start": "next start"

다행이다. 우리는 지금 Next를 설치했다.js, 계속 전진할 준비!

첫 번째 구성 요소 만들기

이제 기억하세요.js는 Javascript일 뿐입니다. React 위에 있기 때문에 우리가 해야 할 일은 구성 요소를 구축하는 것입니다.라우팅은 어셈블리 이름을 통해 이루어지므로 예를 들어, mysite.com/blog 디렉토리의 blog.js 이름 파일에서 가져옵니다.
가장 좋아하는 코드 편집기에서 이 항목을 열고 pages 디렉터리에 index.js 라는 파일을 만듭니다.
HTML을 반환하는 구성 요소를 만듭시다!

const Index = () => (
    <div>
        <h1>My Portfolio Site</h1>
        <p>Welcome to my portfolio! This is designed with Next.js!</p>
    </div>
)

export default Index

현재 명령줄에서 pages 을 실행하고 웹 브라우저에서 로 이동하면 이 내용을 제공하는 것을 발견할 수 있습니다.

http://localhost:3000 링크 API 소개

우리는 모두 React의 페이지 렌더링을 좋아하지 않습니까?Next를 사용하여 동일한 클라이언트 탐색을 완료할 수 있습니다.js는 다음을 사용합니다.js .만약 우리 투자조합 사이트에 연락처 페이지가 있다고 가정하면 우리는 다음과 같이 업데이트된 색인 구성 요소를 가지고 있을 것이다.

import Link from 'next/link';

const Index = () => (
    <div>
        <h1>My Portfolio Site</h1>
        <p>
            Welcome to my portfolio! This is designed with Next.js!
            Please{' '}
                <Link href="/contact">
                    <a>contact me</a>
                </Link>{' '}
            to get more information.
        </p>
    </div>
)

export default Index

먼저 Next에서 Link API 모듈을 가져왔습니다.JS, 그리고 우리는 내용에서 그것을 내연적으로 사용합니다. npm run dev 문법으로 그것을 위한 자리 표시자를 만듭니다.{' ' } 구성 요소는 고급 구성 요소입니다. 예를 들어 <Link> href 및 href URL 차단 등 두 개의 매개 변수만 지원합니다.베이스 구성 요소(이 예에서 as 표시)는 <a> 및 style 등 다른 도구를 지원합니다.

링크 API 재사용 가능한 더 작은 어셈블리 만들기

지금 우리는 아주 좋은 시작을 했지만, 당신은 우리가 만든 모든 페이지에 제목을 다시 써야 한다고 상상할 수 있습니까?이것이 바로 우리가 왜 우리의 사이트를 중용할 수 있는 작은 구성 요소로 분해하는가!
다음js는 네가 어떻게 해야 하는지에 대해 의견이 없다.그러나 onClick 디렉터리에 넣으면 외부 세계가 직접 접근할 수 있다는 것을 기억하십시오.누가 당신의 머리글, 네비게이션 표시줄, 꼬리말에 직접 접근하기를 원하십니까?없으면 외부에 배치합니다.pages 톱 디렉터리를 계속 만듭니다. components 및 mkdir components 파일을 만듭니다.
코드 편집기에서 touch header.js 파일을 열고 헤더 구성 요소를 만듭니다!

const Header = () => (
    <div>
        <h1>My Portfolio Site</h1>
    </div>
)

export default Header

그런 다음 header.js 파일로 돌아가 새 헤더 파일을 결합합니다.

import Link from 'next/link';
import Header from '../components/header';

const Index = () => (
    <div>
        <Header />
        <p>
            Welcome to my portfolio! This is designed with Next.js!
            Please{' '}
                <Link href="/contact">
                    <a>contact me</a>
                </Link>{' '}
            to get more information.
        </p>
    </div>
)

export default Index

현재 새로운 header.js 구성 요소는 단지 우리를 위해 index.js 표시를 저장한 것일 뿐이지만, 너무 많은 상상을 하지 않아도 이해할 수 있다. 실제 사이트에서는 HTML 표시만 있는 것이 아니다.
이제 Next를 설치했습니다.js는 새 프로젝트를 초기화하고 구성 요소를 만들며 Next로 연결합니다.js는 API를 연결하고 전체 프로젝트에서 구성 요소를 다시 사용합니다.이것은 매우 좋은 기초다.
그 다음엔 또 많아요.js는 자바스크립트의 CSS, 사용자 정의 서버(예를 들어 Express 사용), 페이지 사이의 전달 상태 등과 유사하다. 더 깊은 잠수를 하고 다음 단계와 다음 단계를 즐겨보세요.js!