다음Js 시리즈 #1 - Next를 사용하여 간단한 블로그를 만드는 것이 얼마나 쉬운지.js(React의 서버 쪽 렌더링 프레임워크)?
React 라이브러리(또는 프레임워크라고 부르고 싶은)는 클라이언트 웹 개발에서 매우 유행하고 사용자에게 틈새 없는 조회 체험을 제공하며 귀하의 사이트는 단일 페이지 응용 프로그램(SPA)으로 사용됩니다.그러나 다음과 같은 이유로 서버에 React 응용 프로그램을 표시하려고 할 수 있습니다.
서버에서 Javascript를 작성하려면 노드가 필요합니다.js(10.13 이상)가 설치되었습니다.
다음 명령을 입력하여 다음을 만듭니다.js 프로젝트:
npx create-next-app demo-for-next
이것은 당신이 얻을 기본 파일 구조입니다.일반적으로 나는 구성 요소 폴더를 추가해서 나의 것을 저장한다.React 구성 요소의 jsx 파일입니다. 이 프레젠테이션에서 이 파일 구조를 계속 사용하십시오.
일부 파일 (index.js, _app.js,api>hello.js) 을 포함하는 "pages"라는 폴더를 만들었습니다.각각.이 js 파일은 웹 응용 프로그램의 단점을 나타냅니다. (_app.js를 제외하고는 사용자 정의 가능한 응용 프로그램 구성 요소입니다. 기본적으로 웹 페이지를 각각의 단점으로 초기화할 수 있습니다. 우리는 독자적인 주제로 그것을 어떻게 활용할지 토론할 것입니다.지수js는 자동으로 루트 ("/") 가 됩니다. js 파일 ("hello.js") 을 폴더 ("api") 에 넣어서 루트를 삽입할 수 있습니다. 끝점은 "/api/hello"입니다.각 페이지를 구축하기만 하면 (파일 이름은 경로 이름이고 ".js") 가 없으면 서로 다른 경로를 쉽게 설정할 수 있습니다.
터미널에서 "npm run dev"를 입력하면 dev 서버를 시작하고 로컬 호스트: 3000으로 이동하여 다음 단계까지 미리 구축된 페이지를 볼 수 있습니다.js.루트 경로에 착륙해야 합니다. 이 경로는 인덱스의 내용을 표시합니다.js,route/api/hello로 이동하여hello의 내용을 볼 수 있습니다.js.
우리는 우리의 매우 간단한 블로그 예시를 구축하기 시작한다.페이지 폴더 아래의 index.js를 엽니다.우리는 예시 블로그 홈페이지의 루트 경로 내용을 수정할 것이다.나는 단지 Next 전에 기존의 스타일에 대해 간단한 수정을 했을 뿐이다.js.
import Head from 'next/head';
import Link from 'next/link';
import styles from '../styles/Home.module.css';
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>My Little Blog</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to My Blog
</h1>
<div className={styles.grid}>
<Link href="./blog1">
<a className={styles.card}>
<h3>Blog 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat vehicula felis eget feugiat. Nullam mattis feugiat massa, id consectetur dolor pellentesque eget. Praesent non varius est, at rutrum nisl. Maecenas feugiat vitae quam et imperdiet. Nam vulputate volutpat metus, mollis faucibus nisi eleifend ac. Integer egestas libero odio, eget ultrices leo condimentum eu.</p>
</a>
</Link>
<Link href="./blog2">
<a className={styles.card}>
<h3>Blog 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat vehicula felis eget feugiat. Nullam mattis feugiat massa, id consectetur dolor pellentesque eget. Praesent non varius est, at rutrum nisl. Maecenas feugiat vitae quam et imperdiet. Nam vulputate volutpat metus, mollis faucibus nisi eleifend ac. Integer egestas libero odio, eget ultrices leo condimentum eu.</p>
</a>
</Link>
</div>
</main>
</div>
)
}
다음으로, 우리는 두 개의 블로그 게시물을 만들 것이다. 단지 보여주기 위해서, 우리는 Next를 어떻게 사용해서 우리의 응용 프로그램을 활기차게 하는지 토론할 것이다.미래의 js.
import styles from '../styles/Home.module.css';
import Link from 'next/link';
export default function Blog1(){
return (
<div className={styles.main}>
<h1 className={styles.title}>HELLO, THIS IS BLOG 1</h1>
<p className={styles.card} style={{width: "50%"}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat vehicula felis eget feugiat. Nullam mattis feugiat massa, id consectetur dolor pellentesque eget. Praesent non varius est, at rutrum nisl. Maecenas feugiat vitae quam et imperdiet. Nam vulputate volutpat metus, mollis faucibus nisi eleifend ac. Integer egestas libero odio, eget ultrices leo condimentum eu. Vestibulum quis accumsan enim. Aenean sed justo tortor. Duis tincidunt elit ut vulputate commodo. Maecenas at laoreet felis, quis euismod quam. Nulla at nibh sit amet ipsum tincidunt lacinia ac eu mauris.
Nam ornare congue egestas. In sed urna convallis, efficitur mauris et, eleifend sem. Vivamus a tempus risus. Donec dignissim nec arcu vel laoreet. Aenean ultrices porta diam. Duis vel eros vehicula, ornare felis eu, eleifend diam. Praesent sit amet erat sed libero feugiat molestie ut nec felis.
Vivamus laoreet ex sed ligula vestibulum congue. Pellentesque porttitor tellus ut odio pulvinar sagittis. Morbi viverra tristique dignissim. Proin interdum luctus semper. Nulla at pulvinar orci. Curabitur sed dapibus sem. Mauris rhoncus aliquam felis sit amet feugiat. Curabitur tincidunt facilisis semper.
Etiam sit amet risus et orci tincidunt posuere. Integer fermentum pellentesque velit nec venenatis. Etiam eleifend laoreet rhoncus. Aenean cursus tortor neque, in varius eros hendrerit quis. Maecenas eu porttitor eros. Integer quis fringilla mauris. Morbi pulvinar mattis justo a elementum. Phasellus aliquam auctor orci sit amet hendrerit. In ante nisl, pretium vitae volutpat et, semper nec ex. Phasellus leo arcu, congue eu convallis nec, varius quis sem. Quisque sodales neque blandit massa mollis bibendum. Cras nec molestie velit. Nullam vel consequat libero, non porta ipsum. Sed sit amet libero mi. Etiam iaculis ipsum sed porttitor gravida. Duis nec pretium ante.
Sed ullamcorper accumsan mi, at dignissim dolor vestibulum in. Quisque diam orci, congue in sagittis a, dapibus et odio. Praesent convallis augue non fringilla maximus. Aliquam varius ipsum ac cursus tempus. Donec lacus purus, tincidunt id ultrices ut, sollicitudin sit amet erat. Curabitur a gravida lorem, id feugiat orci. Curabitur ut pretium nulla, at pulvinar libero. Aliquam blandit neque blandit felis interdum, sed dictum ligula porttitor. Mauris condimentum ut massa in placerat. Suspendisse rhoncus finibus leo ut sagittis. Cras quis odio nec ante gravida viverra ut ac dui. Nunc tristique dictum metus vitae pharetra. Vivamus in leo vel urna sagittis efficitur sit amet a ante. Nulla pellentesque malesuada imperdiet. Phasellus non lacus consectetur, lobortis orci ac, gravida nisl. Vivamus eget lobortis elit.
</p>
<Link href="/">
<a>Back to home</a>
</Link>
</div>
);
}
import styles from '../styles/Home.module.css';
import Link from "next/link";
export default function Blog2(){
return (
<div className={styles.main}>
<h1 className={styles.title}>HELLO, THIS IS BLOG 2</h1>
<p className={styles.card} style={{width: "50%"}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget mauris lectus. Proin pulvinar ipsum id augue efficitur, vel imperdiet magna ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. In id nisi velit. Donec commodo blandit orci in gravida. Mauris non purus vel erat ornare bibendum porttitor a elit. Nullam maximus neque tortor, non lobortis felis posuere eu. Praesent orci turpis, pulvinar sit amet dolor at, viverra sollicitudin erat.
Integer aliquam ornare mauris sed sagittis. Aenean interdum lectus consectetur elementum dapibus. Pellentesque non ipsum imperdiet, commodo elit sed, ornare purus. Sed lacus ipsum, tempor at elementum rhoncus, tempor ac nisi. Morbi tellus ex, malesuada aliquet ultrices a, aliquam eu erat. Nulla rhoncus et orci at scelerisque. Donec dignissim ac nibh ac varius.
Nulla mollis lacinia urna nec feugiat. Mauris libero ipsum, eleifend quis dolor ac, vulputate porta odio. Suspendisse semper felis nec elementum elementum. Maecenas placerat lorem eget odio mattis finibus. Etiam auctor mauris eget massa tristique, non luctus leo suscipit. In egestas mauris in lectus facilisis, porta semper felis lobortis. Suspendisse elit nibh, euismod et velit id, ornare accumsan massa. Donec ut ante in nunc ornare gravida. In dictum urna sed laoreet sollicitudin. Duis vel scelerisque neque, vitae dapibus tellus. Curabitur volutpat libero a interdum porttitor. Praesent purus est, consectetur iaculis convallis ut, congue fringilla est. Maecenas venenatis risus lectus, a pellentesque magna ullamcorper ac. Nulla tempus et metus et dictum. Aenean neque metus, fringilla et condimentum sit amet, aliquam sed ipsum.
In a ipsum egestas, congue nulla nec, dictum nisi. Ut libero urna, posuere eget ipsum sed, tempus commodo metus. Ut cursus enim id ex cursus, eget laoreet mi sodales. Proin nulla turpis, consequat vitae ultrices eget, suscipit non libero. Aliquam porttitor varius sem in pellentesque. Vivamus volutpat neque erat, a ullamcorper tortor ullamcorper eu. Duis a magna pulvinar, imperdiet ligula sit amet, pharetra urna. Nam lobortis lectus at velit ultricies, sit amet pellentesque sapien cursus. Donec posuere ex tellus, at auctor enim aliquam eget. Duis iaculis lorem vitae efficitur pretium. In sit amet quam egestas, dapibus quam vel, placerat lacus. Integer ut commodo felis. Aliquam tristique ex eu quam tincidunt suscipit. Fusce porta blandit urna. Vestibulum quis porta nibh, at dictum odio. Sed ut pulvinar quam.
Vivamus ultrices, sem ut lacinia pellentesque, nibh sem posuere orci, in aliquam nisi enim id tellus. Quisque elementum laoreet lectus in gravida. Morbi vitae egestas libero. Cras erat dolor, faucibus sed leo eget, lobortis pharetra leo. Aenean nec sapien lorem. Ut facilisis mauris quam, at commodo diam ultricies ut. Nam eget lectus vitae nulla sagittis porttitor non at ligula. Aenean porta est vitae mi pulvinar scelerisque. Ut vel orci tellus. Aenean tincidunt quis elit ut porttitor. Suspendisse nisi nisi, sodales at ante at, efficitur consequat mi.
Curabitur tempus cursus nulla quis cursus. Morbi pretium fringilla posuere. Nullam tristique ex at justo ornare elementum. Vestibulum blandit quis urna eget gravida. Sed dapibus hendrerit ante, a dictum diam maximus sed. Vivamus accumsan odio et finibus varius. Pellentesque fringilla erat purus. Sed lacinia purus in consectetur consequat. Donec nec blandit neque. Quisque lobortis rutrum quam ac pulvinar. Nunc semper tempus lectus, consequat eleifend nunc feugiat quis. Sed volutpat erat a mauris auctor vulputate. Vestibulum ipsum ligula, porttitor eu massa convallis, scelerisque consequat massa.
Cras non condimentum risus, quis sollicitudin neque. Vivamus aliquet hendrerit urna vel tincidunt. Praesent tristique scelerisque tristique. Vivamus risus dui, ornare non lobortis ut, pharetra ullamcorper tellus. Nunc quis urna egestas, accumsan mauris eget, sodales metus. Fusce nec dignissim purus. Suspendisse ultrices pretium tellus, ultrices efficitur lorem semper eu. Quisque laoreet, lorem placerat scelerisque feugiat, ante felis pulvinar libero, id pharetra turpis eros ut nisi. Etiam dictum nulla at lectus rhoncus condimentum. Phasellus a quam augue. Nullam ornare nisi eget elit rhoncus sagittis.
</p>
<Link href="/">
<a>Back to home</a>
</Link>
</div>
);
}
지금까지 우리는 다음 프레젠테이션에서 더욱 깊이 있는 주제를 토론할 것이다.동적 라우팅, getInitialProps 등
저를 따라 웹 디자인, 프로그래밍과 자기 보완에 관한 더 많은 글을 읽어 주십시오😊
Reference
이 문제에 관하여(다음Js 시리즈 #1 - Next를 사용하여 간단한 블로그를 만드는 것이 얼마나 쉬운지.js(React의 서버 쪽 렌더링 프레임워크)?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ohdylan/how-easy-it-is-to-start-setting-up-a-simple-blog-with-next-js-server-side-rendering-framework-for-react-1kd7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
