패스트캠퍼스 챌린지 26일차 (Next.js 심화2)

22.2.18 (금) +26days

Layouts

https://nextjs.org/docs/basic-features/layouts

모든페이지에 공통으로 존재 하는 페이지는 Layout으로 빼놓는다.

여러 Layout들을 사용할때는 Page.getLayout 활용 가능

Per-Page Layouts

멀티 layouts를 사용할 때는 getLayout 을 사용한다.

Data Fetching

layout 안에서는 useEffect 나 SWR을 사용할 수 있다. Page가 아니기 때문에 getStaticProps 또는 getServerSideProps를 사용할 수 없다.

// components/layout.js

import useSWR from 'swr'
import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  const { data, error } = useSWR('/api/navigation', fetcher)

  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>

  return (
    <>
      <Navbar links={data.links} />
      <main>{children}</main>
      <Footer />
    </>
  )
}

---

Image Component and Image Optimization

https://nextjs.org/docs/basic-features/image-optimization

• Improved Performance: Always serve correctly sized image for each device, using modern image formats
• Visual Stability: Prevent Cumulative Layout Shift automatically
• Faster Page Loads: Images are only loaded when they enter the viewport, with optional blur-up placeholders
• Asset Flexibility: On-demand image resizing, even for images stored on remote servers

Using the Image Component

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt="Picture of the author"
        // width={500} automatically provided
        // height={500} automatically provided
        // blurDataURL="data:..." automatically provided
        // placeholder="blur" // Optional blur-up while loading
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

Domains

Sometimes you may want to access a remote image, but still use the built-in Next.js Image Optimization API. To do this, leave the loader at its default setting and enter an absolute URL for the Image src.

To protect your application from malicious users, you must define a list of remote domains that you intend to access this way. This is configured in your next.config.js file, as shown below:

module.exports = {
  images: {
    domains: ['example.com', 'example2.com'],
  },
}

---

Font Optimization

https://nextjs.org/docs/basic-features/font-optimization

// Before
<link
  href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
  rel="stylesheet"
/>

// After
<style data-href="https://fonts.googleapis.com/css2?family=Inter&display=optional">
  @font-face{font-family:'Inter';font-style:normal...
</style>

Usage

To add a web font to your Next.js application, override next/head. For example, you can add a font to a specific page:

---

Static File Serving

Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

import Image from 'next/image'

function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

export default Avatar

---

Fast Refresh

https://nextjs.org/docs/basic-features/fast-refresh#limitations

Fast Refresh is a Next.js feature that gives you instantaneous feedback on edits made to your React components. Fast Refresh is enabled by default in all Next.js applications on 9.4 or newer . With Next.js Fast Refresh enabled, most edits should be visible within a second, without losing component state.

---

ESLint

https://nextjs.org/docs/basic-features/eslint

Since version 11.0.0, Next.js provides an integrated ESLint experience out of the box. Add next lint as a script to package.json:

"scripts": {
  "lint": "next lint"
}

---

TypeScript

https://nextjs.org/docs/basic-features/typescript

---

Environment Variables

https://nextjs.org/docs/basic-features/environment-variables

Next.js comes with built-in support for environment variables, which allows you to do the following:

• Use .env.local to load environment variables
• Expose environment variables to the browser by prefixing with NEXT_PUBLIC_

---

Supported Browsers and Features

https://nextjs.org/docs/basic-features/supported-browsers-features

---

정리

Layouts ⇒ Page.getLayout

Optimization ⇒ Image / Font / Script

Static file / Fast Refresh ⇒ public / 똑똑하게 reload 판단

기타 ⇒ ESLint / Typescript / 환경 변수

 

 

 

 

22.2.18 +26days

 

 

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다