기본적인 다음 단계를 세우다.js 응용 프로그램

다음.js는 React 위에 세워진 끝에서 끝까지의 프레임워크입니다.js 및 Nodejs.이는 프런트엔드와 백엔드까지 확장되는 단일 프레임임을 의미합니다.대부분의 프런트엔드 코드가 React처럼 보인다는 의미입니다.js와 대부분의 백엔드 코드는 노드처럼 보입니다.js.
코드가 익숙해 보이지만 다음은.js는 많은 장점을 가져왔습니다. 이것은 가장 유행하는 백엔드javascript 프레임워크 중 하나입니다. 여러 가지 이유가 있습니다.다음은 다음과 같습니다.

0 구성다음 개봉 즉시 사용 가능.js는 코드를 컴파일하고 묶는 데 사용됩니다.

정적 페이지 생성.그것은 설정하기 쉬우며 응용 프로그램의 검색엔진 최적화와 속도도 향상시키기 쉽다.

파일 시스템 라우팅루트는 매우 간단해서 관련 코드를 함께 유지하는 데 도움이 된다.

넥스트를 사용할 이유도 많다.너는 그들의 사이트documentation에서 볼 수 있다.그러나 본문에서 나는 이 세 가지 측면을 중점적으로 소개할 것이다.
다음.js는 응용 프로그램을 안내하기 위한 명령행 도구가 있지만, 나는 이 도구를 사용하지 않을 것이다. 왜냐하면 내가 그것을 만드는 것이 정말 무슨 일이 일어났는지 이해하는 데 도움이 될 것이라고 생각하기 때문이다.
우선, 우리는 소프트웨어 패키지를 설치해야 한다.npm i next react react-dom 이것이 바로 우리가 오늘 필요로 하는 것이다.하지만 우리도 가방을 설치해야 한다.json은 다음 명령을 스크립트에서 실행하도록 하기 때문에 이 명령을 추가합니다.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

next devNext를 사용하여 개발 서버를 시작합니다.js

next build 생산 코드 컴파일

next start 다음 단계를 시작합니다.js 생산 서버

다음.js의 쿨 기능은 React Refresh를 통해 다시 불러옵니다.그래서 이 프레젠테이션 npm run dev 을 한 번만 실행하면 코드가 자동으로 업데이트되고, 가능하면 React 상태를 유지하려고 시도할 수도 있습니다.
이제 우리 다음 단계에 어떻게 해야 할지 이야기합시다.js 처리 루트.루트 디렉토리에 pages 디렉토리를 생성합니다.현재 여기에 index.js 라는 파일을 만듭니다. 아주 기본적인 React 구성 요소를 만듭니다.

const Home = () => (
  <div>
    My Next.js HomePage
  </div>
);

export default Home;

이것이 바로 네가 필요로 하는 것이다.너는 심지어 반응할 필요조차 없다.현재 npm run dev를 실행하고 http://localhost:3000로 이동하면 응용 프로그램을 볼 수 있습니다.pages 디렉터리는 파일 이름을 통과하는 경로를 제어합니다.따라서 about.js 디렉터리에 pages를 넣으면 urlhttp://localhost:3000/about이 됩니다.폴더에도 적용되기 때문에 profile에 pages 디렉터리를 만들고 그 디렉터리index.js를 만들면 URL은 http://localhost:3000/profile이 됩니다.
다음.js는 클라이언트 내비게이션을 처리하기 위한 React 구성 요소도 제공합니다.따라서 다른 모든 페이지를 이렇게 훑어볼 수 있도록 저희 index.js 를 수정할 수 있습니다.

import Link from 'next/link';

const Home = () => (
  <div>
    My Next.js HomePage
    <Link href='/about'><a>About</a></Link>
    <Link href='/profile'><a>Profile</a></Link>
  </div>
);

export default Home;

이 모든 것이 기본적인 React 코드처럼 보이기 때문에, 서버 코드로 재미를 더해 봅시다.
우리들은 우리의 관련 페이지를 만들고 다음 페이지를 이용할 것이다.js의 정적 페이지 생성정적 생성은 우리가 다음 세대를 구축할 때 발생한다.js 응용 프로그램과 페이지에 HTML을 생성합니다.이것은 CDN 캐시를 받을 수도 있고 검색엔진에 잡힐 수도 있다는 것을 의미한다.이것은 당신의 사용자가 더욱 쉽게 찾을 수 있고, 당신의 사이트의 마운트 속도도 더욱 빠르다는 것을 의미한다.
다음 페이지에 데이터가 포함되지 않으면js는 정적 생성을 사용하여 그것을 구축할 것입니다. 그러나 데이터를 사용한다면 그럴 수도 있습니다.이것은 블로그나 우리의 예시에 데이터베이스에 저장된 연락처 정보 등 자주 변경하기를 원하지 않는 내용에 특히 유용합니다.
그래서 우리about.js를 열고 내용을 주자.
맨 윗부분import을 너무 걱정하지 마세요. 사용자 데이터를 얻는 데이터베이스 조수일 뿐이에요.

import userHelpers from '../../database';

const About = ({ users }) => (
  <div>
    About
    <ul>
      { users.map(user => (
        <li key="user.id">
          {user.email}
        </li>
      )) }
    </ul>
  </div>
);

export const getStaticProps = async () => {
  const response = await userHelpers.getAllUsers();
  const users = JSON.parse(JSON.stringify(response));
  return {
    props: {
      users,
    },
  };
};

export default About;

우리의 React 코드는 맨 위에 위치하고 도구를 포함하는데 이 모든 것이 매우 익숙해 보인다는 것을 주의하십시오.그러나 아래에 getStaticProps가 있습니다. 이것은 서버 사이드 코드입니다. 우리는 이 페이지와 다음 페이지가 관련되어 있기 때문에 여기에 쓸 수 있습니다.js는 클라이언트 코드와 묶지 않기 때문에 데이터베이스 조수를 사용할 수 있습니다.다음.js는 심지어 우리가 getStaticProps에서 import 문장을 사용했다는 것을 알고 있기 때문에 React 코드와 묶지 말아야 한다.
그래서 다음 구축할 때.js는 getStaticProps에서 되돌아오는 도구를 가져와 React 함수에 전달하고 클라이언트에 HTML을 생성합니다.
이것이 너로 하여금 넥스트에 대해 충분한 흥미를 가지게 할 수 있기를 바란다.한번 해보고 싶어요.그것은 또 많은 다른 매우 재미있는 기능을 가지고 있다.예를 들어 파일 이름을 통해 동적 루트를 하고 동적 루트를 위해 동적 페이지를 미리 보여주는 방법이다.또한 서버 측 렌더링을 손쉽게 처리할 수 있습니다.또한 즉시 사용할 수 있는 CSS 모듈을 지원합니다.
다음은 빙산의 일각일 뿐이다.js는 React와 Node를 작성하는 데 익숙해지면 많은 기능을 제공합니다.js 코드는 그것보다 직관적이고 배우기 쉽다.