여러가지 공부를 같이 진행하다 보니,
실습하면 까먹고를 계속 반복하게 된다.
장기기억으로 넘어가는 과정이라고 생각하고자 했으나
공부에 진척이 없다는 것을 깨닫고 쓰는 로그다.
따라서, 글에 두서가 없고 온전히 내 기준으로 쓰여진 글이겠다.
그럼 시작!
브라우저에서 돌아가기 위해서, terminal에 해당 명령어를 입력한다.
npm run dev
Create a New Page
Create the posts directory under pages.
→ 여기에서 파일명을 first-post.js라고하자
Link Component
pages안에 있는 index.js 파일에 <Link href="/posts/first-post">this page!</Link>을 넣고
first-post.js에 import Link from 'next/link';로 link를 연결할 수 있도록 한다.
[실습과정]
Read <Link href="/posts/first-post">this page!</Link>
→ pages/posts 안에 있는 first-post.js로 페이지 이동
<Link href="/">
→ 다시 상위 페이지로 넘아가는듯
→ Link태그랑 a태그랑 비슷한거, a태그는 nextjs외부 페이지로 연결하고 싶을
Summary
- No routing libraries are required.
- Next.js automatically optimizes your application for the best performance by code splitting, client-side navigation, and prefetching (in production).
Assets, Metadata, and CSS
Files inside public can be referenced from the root of the application similar to [pages](<https://nextjs.org/docs/basic-features/pages>).
Image Component and Image Optimization
[next/image](<https://nextjs.org/docs/api-reference/next/image>) is an extension of the HTML <img> element, evolved for the modern web.
Next.js optimizes images on-demand, as users request them.
→ nextjs가 이미지를 자동적으로 최적화
Third-Party JavaScript
Third-party JavaScript 는 새로운 기능을 사이트에 넣을 때 참조된다.
예를 들어 분석, 광고, 소비자를 돕는 위젯이 아닌 사이트를 소개하기 위해 포함된다.
refers to any scripts that are added from a third-party source. Usually, third-party scripts are included in order to introduce newer functionality into a site that does not need to be written from scratch, such as analytics, ads, and customer support widgets.
Adding Head to first-post.js
<Head> is a React Component that is built into Next.js. It allows you to modify the <head> of a page.
javascript에서는 <script>요소를 통해 추가적인 메타데이터가 구성됐다.
Using the Script Component
[next/script](<https://nextjs.org/docs/api-reference/next/script>) is an extension of the HTML <script> element and optimizes when additional scripts are fetched and executed.
import Script from 'next/script';로 script를 파일에서 실행할 수 있다.
import Head from 'next/head';
import Link from 'next/link';
import Script from 'next/script';
export default function FirstPost() {
return (
<>
console.log(`script loaded correctly, window.FB has been populated`)
}
/>
<h1>First Post</h1>
<h2>
<Link href="/">← Back to home</Link>
</h2>
</>
);
}
이렇게 first-post.js를 구성할 수 있다.
strategy 필드는 third-party script가 load하는 때에, 제어하는 기능을 한다.
위에 코드에 나와 있는 lazyOnload 는 브라우저가 아무것도 하지 않는 동안 (idle time), nextjs에게 특정 script를 load하게 한다.
