si0

1. 자동 이미지 최적화
Next.js 13 버전에서는 이미지 컴포넌트가 자동으로 WebP 및 AVIF와 같은 모던한 이미지 형식으로 변환됩니다. 이는 이미지의 품질을 향상시키고 로드 시간을 줄이는 데 도움이 됩니다.

2. 새로운 라우팅 API
Next.js 13 버전에서는 새로운 라우팅 API가 도입되었습니다. 이 API는 라우트 변경에 대한 알림을 받을 수 있습니다. 이를 통해 특정 라우트에서 필요한 데이터를 로드하거나, 라우트 변경에 대한 애니메이션 효과를 추가하는 등 다양한 기능을 구현할 수 있습니다.

3. 더 나은 성능
Next.js 13 버전에서는 초기 로드 속도가 더욱 빨라졌습니다. 이는 이전 버전보다 더욱 최적화된 코드를 사용하고, 데이터 사전 로딩과 같은 성능 개선 기능이 개선되었기 때문입니다.

4. 개선된 TypeScript 지원
Next.js 13 버전에서는 TypeScript 지원이 개선되었습니다. 이전 버전에서는 TypeScript를 사용할 때 몇 가지 문제가 있었는데, 이번 버전에서는 이러한 문제가 대부분 해결되었습니다.

5. 새로운 플러그인 API
Next.js 13 버전에서는 새로운 플러그인 API가 도입되었습니다. 이 API를 사용하면 Next.js에 새로운 기능을 추가할 수 있습니다. 이를 통해 더욱 개발자 친화적인 기능을 추가하거나, 개발 프로세스를 더욱 자동화할 수 있습니다.

6. 새로운 이미지 레이아웃 API
Next.js 13 버전에서는 새로운 이미지 레이아웃 API가 도입되었습니다. 이 API를 사용하면 이미지를 렌더링할 때 다양한 레이아웃을 적용할 수 있습니다. 이를 통해 이미지를 더욱 예쁘고, 효과적으로 렌더링할 수 있습니다.

7. 기타 개선 사항
Next.js 13 버전에서는 이전 버전과 비교해서 수많은 기능 개선과 버그 수정이 이루어졌습니다. 이를 통해 개발자들은 더욱 안정적이고, 효율적인 Next.js 애플리케이션을 개발할 수 있습니다.

• app 디렉토리(베타):클라이언트 JS를 쉽고 빠르게 줄일 수 있습니다.
  • 레이아웃
  • 리액트 서버 컴포넌트
  • 스트리밍
• 터보팩(알파):최대 700배 빠른 Rust 기반 웹 팩 교체
• New : 네이티브브라우저 로딩이 느림으로써 고속화됩니다.
• 신규(베타):레이아웃 이동이 없는 자동 자체 호스팅 글꼴입니다.
• 개선 : 자동 API를 통한 심플화<a>.

기존 코드에서 업데이트 방법

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

신규app디렉토리(베타)

현재 Next.js의 라우팅 및 레이아웃 환경을 개선하고 React의 미래와 연계하여app디렉토리로 이동합니다.이것은 커뮤니티 피드백을 위해 이전에 공개된 Layouts RFC의 후속 조치입니다.

그app디렉토리는 현재 베타 버전이며 아직 프로덕션에서 사용하지 않는 것이 좋습니다.Next.js 13은 다음 명령어와 함께 사용할 수 있습니다.pages향상된 및 컴포넌트와 같은 안정적인 기능을 갖춘 디렉토리,app디렉토리 작성은, 고객의 페이스에 따라 주세요.그pages디렉토리는 가까운 장래에도 계속 지원됩니다.

그app디렉토리에는, 다음의 서포트가 포함됩니다.

• 레이아웃:상태를 유지하고 값비싼 재렌더를 피하면서 경로 간에 UI를 쉽게 공유할 수 있습니다.
• 서버 컴포넌트: 서버 우선을 가장 동적인 애플리케이션 디폴트로 합니다.
• 스트리밍:렌더링 시 즉각적인 로드 상태 및 UI 단위로 스트리밍을 표시합니다.
• 데이터 가져오기 지원: async서버 컴포넌트 및 확장fetchAPI는 컴포넌트 수준의 취득을 가능하게 합니다.

레이아웃

app/directory를 사용하면 네비게이션 간에 상태를 유지하고 비용이 많이 드는 재접속을 방지하며 고도의 라우팅 패턴을 활성화하는 복잡한 인터페이스를 쉽게 배치할 수 있습니다.또한 레이아웃을 중첩하고 구성요소, 테스트 및 스타일과 같은 경로와 애플리케이션 코드를 연결할 수 있습니다.

'app/' 내부에 경로를 만들려면 'page.js'라는 단일 파일이 필요합니다.

// app/page.js
// This file maps to the index route (/)
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

그런 다음 파일 시스템을 통해 레이아웃을 정의할 수 있습니다.레이아웃은 여러 페이지 간에 UI를 공유합니다.탐색에서 레이아웃은 상태를 유지하고 대화형 상태를 유지하며 다시 렌더링하지 않습니다.

// app/blog/layout.js
export default function BlogLayout({ children }) {
  return <section>{children}</section>;
}

레이아웃 및 페이지에 대해 자세히 알아보거나 예를 배포하여 사용해 보십시오.

서버 컴포넌트

그app/디렉토리에는 React의 새로운 서버 컴포넌트 아키텍처에 대한 지원이 도입되어 있습니다.서버 컴포넌트와 클라이언트 컴포넌트는 각각 서버와 클라이언트를 가장 잘하는 용도로 사용합니다.이것에 의해, 뛰어난 개발자의 경험을 제공하는 단일의 프로그래밍 모델로, 인터랙티브한 고속의 애플리케이션을 구축할 수 있습니다.

서버 컴포넌트를 통해 클라이언트에 전송되는 JavaScript의 양을 줄이면서 복잡한 인터페이스를 구축할 수 있는 기반을 마련하여 초기 페이지 로드를 가속화할 수 있습니다.

루트가 로드되면 캐시 가능하고 크기를 예측할 수 있는 Next.js 및 React 런타임이 로드됩니다.이 런타임은 응용 프로그램이 커지더라도 크기가 커지지 않습니다.게다가 런타임은 비동기적으로 로드되기 때문에, 서버로부터의 HTML이 클라이언트상에서 단계적으로 강화됩니다.

Server Components에 대해 자세히 알아보거나 예를 배포하여 사용해 보십시오.

스트리밍

그app/디렉토리에는 클라이언트에 UI의 렌더링된 단위를 점진적으로 렌더링하고 증분 스트리밍하는 기능이 도입되었습니다.

Next.js의 서버 구성요소 및 중첩된 레이아웃을 사용하면 데이터가 필요하지 않은 페이지의 일부를 즉시 렌더링하고 데이터를 가져오는 페이지의 일부에 대한 로드 상태를 표시할 수 있습니다.이 방법을 사용하면 사용자는 페이지 전체가 로드될 때까지 기다릴 필요가 없습니다.

Vercel에 도입하면 Next.js는 다음을 사용하는 13개의 애플리케이션을app/디렉토리는 기본적으로 Node.js와 Edge 런타임 모두에서 응답을 스트리밍하여 성능을 향상시킵니다.

스트리밍에 대해 자세히 알아보거나 예를 배포하여 사용해 보십시오.

데이터 가져오기

React의 최근 Support for Promise RFC는 데이터를 가져오고 내부 컴포넌트를 처리할 수 있는 강력하고 새로운 방법을 도입했습니다.

// app/page.js
async function getData() {
  const res = await fetch('https://api.example.com/...');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  return res.json();
}

// This is an async Server Component
export default async function Page() {
  const data = await getData();

  return <main>{/* ... */}</main>;
}

native fetch Web API는 React 및 Next.js에서도 확장되었습니다.가져오기 요청을 자동으로 중복 제거하여 컴포넌트 수준에서 데이터를 가져오기, 캐시 및 재검증할 수 있는 유연한 방법으로 제공합니다.즉, 스태틱사이트 생성(SSG), 서버 사이드 렌더링(SSR) 및 증분 스태틱 재생(ISR)의 모든 이점을 다음 1개의 API를 통해 이용할 수 있게 되었습니다.

// This request should be cached until manually invalidated.
// Similar to `getStaticProps`.
// `force-cache` is the default and can be omitted.
fetch(URL, { cache: 'force-cache' });

// This request should be refetched on every request.
// Similar to `getServerSideProps`.
fetch(URL, { cache: 'no-store' });

// This request should be cached with a lifetime of 10 seconds.
// Similar to `getStaticProps` with the `revalidate` option.
fetch(URL, { next: { revalidate: 10 } });

app디렉토리에서는, 레이아웃, 페이지, 및 컴포넌트내의 데이터를 취득할 수 있습니다(서버로부터의 스트리밍 응답의 서포트를 포함한다).

로드 및 오류 상태를 처리하고 렌더링된 UI에서 스트리밍할 수 있는 인체공학적인 방법을 제공합니다.향후 릴리즈에서는 데이터 돌연변이도 개선 및 단순화할 예정입니다.

오픈 소스 커뮤니티, 패키지 유지보수업체 및 React 생태계에 기여하는 다른 회사와 협력하여 React 및 Next.js의 새로운 시대를 구축하게 되어 기쁘게 생각합니다.컴포넌트 내부에서 데이터를 취득하여 클라이언트에 발송하는 JavaScript를 줄일 수 있는 기능은 커뮤니티의 중요한 피드백의 2가지 요소였습니다.app/디렉토리로 이동합니다.

데이터 가져오기에 대해 자세히 알아보거나 예제를 배포하여 사용해 보십시오.

터보팩 소개(Alpha)

Next.js 13에는 웹 팩의 새로운 Rust 기반 후계 제품인 Turbopack이 포함되어 있습니다.

웹팩은 30억 번 이상 다운로드 되었습니다.웹 구축에 필수적인 요소이지만, JavaScript 기반 툴링으로 가능한 최대 성능의 한계에 도달했습니다.

Next.js 12에서는 기본 Rust 구동 툴링으로 전환하기 시작했습니다.처음에는 바벨에서 멀어져서 17배 빠른 전이를 실현했습니다.그 후 Terser를 교체하여 6배 빠른 최소화를 실현했습니다.번들에 대해 네이티브에 올인할 때입니다.

Next.js 13과 함께 Turbopack 알파를 사용하면 다음과 같은 결과가 나옵니다.

• 웹 팩보다 700배 빠른 업데이트
• Vite보다 10배 빠른 업데이트
• 웹 팩보다 콜드 스타트 속도가 4배 빠릅니다.

Turbopack은 개발에 필요한 최소한의 자산만 번들하므로 시작 시간이 매우 빠릅니다.3,000개의 모듈을 탑재한 어플리케이션에서는 Turbopack이 기동하는 데 1.8초가 걸립니다.Vite는 11.4초, Webpack은 16.5초 걸립니다.

Turbopack은 서버 컴포넌트, TypeScript, JSX, CSS 등을 즉시 지원합니다.알파 중에는 아직 지원되지 않는 기능이 많습니다.Turbopack을 사용하여 로컬 반복 속도를 높이는 방법에 대한 피드백을 듣고 싶습니다.

참고: Next.js의 터보팩은 현재 지원만 하고 있습니다.next dev지원되는 기능을 표시합니다.또, 델은, 다음의 서포트를 추가하는 작업도 실시하고 있습니다.next build터보팩을 통해서요

오늘 Next.js 13에서 Turbopack 알파를 사용해 보십시오.next dev --turbo.

next/image

Next.js 13은 강력한 새로운 이미지 컴포넌트를 도입하여 레이아웃 변경 없이 이미지를 쉽게 표시하고 필요에 따라 파일을 최적화하여 성능을 향상시킬 수 있습니다.

Next.js 커뮤니티 조사에서는 70%의 응답자가 Next.js Image 컴포넌트를 실가동 시에 사용하고 있다고 답했습니다.그 결과 코어 웹 바이탈이 개선되었습니다.Next.js 13을 사용하면next/image더 멀리.

새로운 이미지 컴포넌트:

• 클라이언트측 JavaScript 출하량 감소
• 스타일링과 구성이 용이함
• 접근하기 쉬운 요건alt디폴트 태그
• 웹 플랫폼에 맞게 조정
• 네이티브의 느린 로딩은 수분을 필요로 하지 않기 때문에 더 빠릅니다.

import Image from 'next/image';
import avatar from './lee.png';

function Home() {
  // "alt" is now required for improved accessibility
  // optional: image files can be colocated inside the app/ directory
  return <Image alt="leeerob" src={avatar} placeholder="blur" />;
}

이미지 구성 요소에 대해 자세히 알아보거나 예를 배포하여 사용해 보십시오.

업그레이드next/imageNext.js 13으로 이동합니다.

이전 이미지 컴포넌트의 이름이 다음과 같이 변경되었습니다.next/legacy/image고객님의 기존 사용법을 자동으로 갱신하는 코드모드가 제공되었습니다.next/image로.next/legacy/image예를 들어, 이 명령어를 사용하면, 코데모드가 동작합니다../pages디렉토리(루트에서 실행 시):

npx @next/codemod next-image-to-legacy-image ./pages

코드모드에 대해 자세히 알아보거나 설명서를 참조하십시오.

@next/font

Next.js 13은 다음과 같은 완전히 새로운 글꼴 시스템을 도입했습니다.

• 커스텀 폰트를 포함한 폰트를 자동으로 최적화
• 외부 네트워크 요구를 배제하여 프라이버시 및 퍼포먼스 향상
• 모든 글꼴 파일에 대한 자동 셀프 호스팅 기능 내장
• CSS 속성을 사용하여 자동으로 레이아웃 이동 없음

이 새로운 폰트 시스템은 성능과 프라이버시를 고려하여 모든 구글 폰트를 편리하게 사용할 수 있도록 합니다.CSS 및 글꼴파일은 빌드 시에 다운로드되어 나머지 스태틱자산과 함께 셀프호스트 됩니다.브라우저에서 Google로 전송되는 요청은 없습니다.

import { Inter } from '@next/font/google';

const inter = Inter();

<html className={inter.className}>

폰트 파일의 자동 셀프호스팅, 캐시 및 프리로드 지원을 포함한 커스텀 폰트도 지원됩니다.

import localFont from '@next/font/local';

const myFont = localFont({ src: './my-font.woff2' });

<html className={myFont.className}>

폰트 로드 익스피리언스의 모든 부분을 커스터마이즈하면서 뛰어난 퍼포먼스와 레이아웃 변경을 실현할 수 있습니다.font-display, 프리로드, 폴백 등.

새로운 Font 컴포넌트에 대해 자세히 알아보거나 예를 도입하여 사용해 보십시오.

next/link

next/link더 이상 수동으로 추가할 필요가 없습니다.<a>어렸을 때.

이것은 12.2에서 실험 옵션으로 추가되어 현재는 기본입니다.Next.js 13에서는<Link>항상 를 렌더링합니다.<a>기본 태그에 소품을 전달할 수 있습니다.예를 들어 다음과 같습니다.

import Link from 'next/link'

// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
  <a>About</a>
</Link>

// Next.js 13: `<Link>` always renders `<a>`
<Link href="/about">
  About
</Link>

개선된 링크 컴포넌트에 대해 자세히 알아보거나 예를 배포하여 사용해 보십시오.

업그레이드next/linkNext.js 13으로 이동합니다.

Next.js 13으로의 링크를 업그레이드하기 위해 코드베이스를 자동으로 갱신하는 코드모드가 준비되어 있습니다.예를 들어, 이 명령어를 실행하면, 이 명령어를 사용하여,./pages디렉토리(루트에서 실행 시):

npx @next/codemod new-link ./pages

코드모드에 대해 자세히 알아보거나 설명서를 참조하십시오.

OG 이미지 생성

오픈그래프이미지라고도 불리는 소셜카드는 콘텐츠의 클릭률을 대폭 높일 수 있으며 일부 실험에서는 변환률이 최대 40% 향상됩니다.

정적 소셜 카드는 시간이 많이 걸리고 오류가 발생하기 쉬우며 유지보수가 어렵습니다.이것 때문에, 소셜 카드는 종종 부족하거나 심지어 건너뛰기도 한다.오늘날까지 개인화 및 즉각적인 계산이 필요한 동적 소셜 카드는 어렵고 비쌌습니다.

Next.js와 심리스하게 연동하여 역동적인 소셜 카드를 생성할 수 있는 새로운 라이브러리를 만들었습니다.

// pages/api/og.jsx

import { ImageResponse } from '@vercel/og';

export const config = {
  runtime: 'experimental-edge',
};

export default function () {
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
        }}
      >
        Hello, World!
      </div>
    ),
  );
}

이 접근방식은 Vercel Edge Functions, Web Assembly 및 HTML 및 CSS를 이미지로 변환하고 React 컴포넌트 추상화를 활용하기 위한 새로운 코어 라이브러리를 사용하여 기존 솔루션보다 5배 더 빠릅니다.

OG 이미지 생성에 대해 자세히 알아보거나 예를 배포하여 사용해 보십시오.

미들웨어 API 업데이트

Next.js 12에서는 미들웨어를 도입하여 Next.js 라우터를 최대한 유연하게 사용할 수 있게 되었습니다.초기 API 설계에 대한 귀하의 피드백을 듣고 개발자 경험을 개선하고 강력한 신기능을 추가하기 위해 몇 가지 추가 사항을 추가했습니다.

이제 요청의 헤더를 보다 쉽게 설정할 수 있습니다.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // Clone the request headers and set a new header `x-version`
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-version', '13');

  // You can also set request headers in NextResponse.rewrite
  const response = NextResponse.next({
    request: {
      // New request headers
      headers: requestHeaders,
    },
  });

  // Set a new response header `x-version`
  response.headers.set('x-version', '13');
  return response;
}

또한 미들웨어에서 직접 응답할 수도 있습니다.rewrite또는redirect.

// middleware.ts
import { NextRequest, NextResponse } from 'next/server';
import { isAuthenticated } from '@lib/auth';

// Limit the middleware to paths starting with `/api/`
export const config = {
  matcher: '/api/:function*',
};

export function middleware(request: NextRequest) {
  // Call our authentication function to check the request
  if (!isAuthenticated(request)) {
    // Respond with JSON indicating an error message
    return NextResponse.json(
      {
        success: false,
        message: 'Auth failed',
      },
      {
        status: 401,
      },
    );
  }
}

현재 미들웨어에서 응답을 보내려면experimental.allowMiddlewareResponseBody내부 설정 옵션next.config.js.

변경 내용 변경

• 최소 React 버전이 17.0.2에서 18.2.0으로 변경되었습니다.
• 최소 Node.js 버전은 12.x가 End-of-Life(PR; 수명 종료)에 도달한 이후 12.22.0에서 14.6.0으로 업그레이드되었습니다.
• 그swcMinify구성 속성이 에서 변경되었습니다.false로.true자세한 내용은 Next.js 컴파일러를 참조하십시오.
• 그next/imageImport의 이름이 변경되었습니다.next/legacy/image.그next/future/imageImport의 이름이 변경되었습니다.next/image. Import의 이름을 안전하고 자동으로 변경할 수 있는 코드모드를 사용할 수 있습니다.
• 그next/link아이는 더 이상 그럴 수 없다<a>. 를 추가합니다.legacyBehavior기존 동작을 사용하거나 기존 동작을 삭제하기 위해<a>업그레이드 할 수 있습니다.코드를 자동으로 업그레이드하기 위한 코드모드를 사용할 수 있습니다.
• 루트가 프리페치되지 않게 된 것은,User-Agent봇입니다.
• 폐지된target의 선택사항next.config.js가 삭제되었습니다.
• 지원되는 브라우저는 Internet Explorer를 삭제하고 최신 브라우저를 대상으로 하도록 변경되었습니다.브라우저 목록을 사용하여 대상 브라우저를 변경할 수 있습니다.
  • 크롬 64 이상
  • 엣지 79+
  • 파이어폭스 67 이상
  • 오페라 51 이상
  • Safari 12 이상

자세한 내용은 업그레이드 가이드를 참조하십시오.

지역 사회

6년 전에 Next.js를 일반에 공개했습니다.델은, 제로 구성의 React 프레임워크의 구축을 개시해, 개발자의 익스피리언스를 심플화합니다.돌이켜보면, 커뮤니티가 어떻게 성장했는지, 그리고 우리가 함께 출하할 수 있었던 것이 놀랍습니다.걔속해서 갑시다.

Next.js는 2,400명이 넘는 개인 개발자, Google 및 Meta와 같은 업계 파트너 및 당사의 핵심 팀이 함께 작업한 결과입니다.Next.js는 매주 300만 건 이상의 다운로드와 9만 4천 건의 GitHub 스타를 보유하고 있으며, 가장 인기 있는 웹 구축 방법 중 하나입니다.

구글 크롬의 Aurora 팀이 이번 출시를 이끈 기초 연구와 실험에 도움을 준 것에 특별한 감사를 표합니다.

원글: https://nextjs.org/blog/next-13

※ 샘플코드 git : https://github.com/vercel/app-playground

> 버전 조건 : Node.js 16.8 or later.

# 프로젝트를 바로 생성하는거 
> npx create-next-app@latest experimental-app

# 수동으로 CLI로 입력하는 법
> npm install next@latest react@latest react-dom@latest eslint-config-next@latest

그럼 package.json 파일이 아래처럼 나온다고 하네요.
{
  "scripts": {
    "dev": "next dev",        // 개발 모드로 시작합니다.
    "build": "next build",    //실가동용 어플리케이션을 빌드합니다.
    "start": "next start",    //Next.js 실가동 서버를 기동합니다.
    "lint": "next lint"       //Next.js의 내장 ESLint 구성을 설정합니다.
  }
}

프로젝트로 생성하는 것은 많이 부족해 보이네요. 

/app 폴더 사용시 추가
[ next.config.js ]

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
};

module.exports = nextConfig;

 [ app/layout.tsx ] <html> 와 <body> tags 가 필요함

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

[ app/page.tsx ]

export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

 app폴더 만들고 layout.tsx 와 page.tsx 파일을 추가하면, 
사용자가 응용 프로그램의 루트를 방문할 때 렌더링됩니다.

{
  "scripts": {
    "dev": "next dev",        // 개발 모드로 시작합니다.
    "build": "next build",    //실가동용 어플리케이션을 빌드합니다.
    "start": "next start",    //Next.js 실가동 서버를 기동합니다.
    "lint": "next lint"       //Next.js의 내장 ESLint 구성을 설정합니다.
  },
    "dependencies": {
    "@types/node": "18.16.0",
    "@types/react": "18.0.38",
    "@types/react-dom": "18.0.11",
    "autoprefixer": "10.4.14",
    "eslint": "8.39.0",
    "eslint-config-next": "13.3.1",
    "next": "13.3.1",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.1",
    "typescript": "5.0.4"
  }
}

...
    "paths": {
      "@/*": ["./*"]
    }
...

/app/Layout.tsx

import './globals.css'
import { Layout } from "@/app/layouts/Layout"


export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <Layout>
          {children}
        </Layout>
      </body>
    </html>
  )
}

 /app/pages.tsx 

import './globals.css'
import Link from 'next/link';

export default function Home() {
  return (
    <div >
      <div >
        <div>
          test text  (app/page.tsx)
          Hello. React! Nextjs !
          <br />
          <Link href="/booklist">list</Link>
        </div>
      </div>
    </div>
  )
}

/app/layouts/layout.tsx 

"use client" 

import React from 'react';
import { Header } from './Header'
import styled from "styled-components";

const BodyContainer = styled.div`
display: inline-block;
font-weight : bold;
display: flex;
width : 100%;
margin: 0 auto;
justify-content: center
`;

const LeftMenuContainer = styled.div`
display: inline-block;
float: left;
width : 28%;
display: none;
`;
const RightBodyContainer = styled.div`
float: left;
width : 68%;
`;

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div id="wrap">
      <div >
        <Header />
      </div>
      <BodyContainer>
        <RightBodyContainer>{children}</RightBodyContainer>
      </BodyContainer>
    </div >
  );
}

/app/layouts/Header.tsx

'use client';

import React from 'react';
import Link from 'next/link';
import styled from "styled-components";

const HeadContainer = styled.div`
font-size: large;
font-weight : bold;
display: flex;
margin: 2em auto;
vertical-align: middle;
width: 100%;
display: block;
text-align: center;
`;

const MenuContainer = styled.div`
display: inline-block;
float: right;
float : right;
`;

const MenuUl = styled.ul`
list-style:none;
margin:0 0 0 0;
padding:0;
display: flex;
`;

const MenuLi = styled.li`
margin: 10px;
padding: 0 0 0 0;
list-style:none;
border : 0;
float: left;
`;

export function Header() {
  return (
    <div id="header-sec">
      <HeadContainer className="inner">
        <div>
          <h1><Link href="/hello">파일럿 게시판 </Link></h1>
        </div>
        <MenuContainer>
          <MenuUl className="utilmenu">
            <MenuLi className="logout"><a href="#">로그아웃</a></MenuLi>
            <MenuLi className="mypage"><Link href="/mypage">마이페이지</Link></MenuLi>
          </MenuUl>
        </MenuContainer>
      </HeadContainer>
    </div>
  );

}

/app/booklist/page.tsx

import { Bookboard } from '@/ui/Bookboard';


export default function Page() {
  return (
    <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
       <Bookboard >test com</Bookboard>
      
      <a href="/">홈</a>
    </div>
  );
}

/ui/Bookboard.tsx

'use client';

import * as React from 'react';
import PropTypes from 'prop-types';

import {Bookboardtr} from "@/ui/Bookboard-tr"
import styled from "styled-components"

export const Bookboard = ({
  children
}: {
  children: React.ReactNode;
}) => {
  const [loading, setLoading] = React.useState(true);
  const [booklist, setBooklist] = React.useState<any[]>([]);
  const getBooklist = async ()=>{
    const json = await(
      await fetch("http://localhost:8082/api/list")
    ).json();
    console.log(json.data.booklist);
    setBooklist(json.data.booklist);
    setLoading(false);
  };
  React.useEffect(()=>{
    getBooklist();
  },[]);
  
  return (
    <div>
      <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
        <thead className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
          <tr>
            <th scope="col" className="px-6 py-3">번호</th>
            <th scope="col" className="px-6 py-3">글쓴이</th>
            <th scope="col" className="px-6 py-3">제목</th>
            <th scope="col" className="px-6 py-3">설명</th>
          </tr>
        </thead>
        <tbody>
              {
                booklist.map((Book)=>(
                  <Bookboardtr key={Book.myname}
                  myno={Book.myno}
                  myname={Book.myname}
                  mytitle={Book.mytitle}
                  mycontent={Book.mycontent}/>
                  ))
                }
        </tbody>
      </table>

    </div>
  );

/ui/Bookboard-tr.tsx 

import * as React from 'react';

export const Bookboardtr = ({
  myno,
  myname,
  mytitle,
  mycontent
}: {
  myno: number;
  myname: string;
  mytitle: string;
  mycontent: string;
}) => {
  return (
    <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
        <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
          <a href="/booklist/${myno}">{myno}</a></td>
        <td className="px-6 py-4">{myname}</td>
        <td className="px-6 py-4">{mytitle}</td>
        <td className="px-6 py-4">{mycontent}</td>
    </tr>
  );
};

.../ controller / RestBoardController.java

package com.board.spbt2.board.controller;

import com.board.spbt2.board.model.biz.MyBoadBiz;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.google.gson.Gson;
import com.google.gson.JsonObject;

@CrossOrigin(origins="http://localhost:3005")
@RestController
public class RestBoardController {
  @Autowired
  private MyBoadBiz biz;
 Gson gson = new Gson();

  @RequestMapping(value = "/api/list")
  public String selectAllList() {

    JsonObject resultjsonObj = new JsonObject(); // 전상 조회여부와 결과값 전달용
    
    JsonObject jsonObj = new JsonObject();  // 조회값
    jsonObj.add("booklist",gson.toJsonTree(biz.selectList()));
   
    resultjsonObj.addProperty("status","ok");
    resultjsonObj.addProperty("status_message","Query was successful");
    resultjsonObj.add("data", jsonObj);
    
    return resultjsonObj.toString();
  }
}

node.js는 Chrome V8 JavaScript엔진으로 빌드된 JavaScript 런타임입니다. 

https://nodejs.org/ko

React는 사용자 인터페이스를 만들기 위한 javascript 라이브러리 입니다.

https://ko.legacy.reactjs.org/

express는 Node.js를 위한 간결한 웹 프레임웍입니다.

https://expressjs.com/ko/

> npx create-react-app ranb-app

> cd ranb-app

> npm start

{
  "scripts": {
    "dev": "next dev",        // 개발 모드로 시작합니다.
    "build": "next build",    //실가동용 어플리케이션을 빌드합니다.
    "start": "next start",    //Next.js 실가동 서버를 기동합니다.
    "lint": "next lint"       //Next.js의 내장 ESLint 구성을 설정합니다.
  },
    "dependencies": {
    "@types/node": "18.16.0",
    "@types/react": "18.0.38",
    "@types/react-dom": "18.0.11",
    "autoprefixer": "10.4.14",
    "eslint": "8.39.0",
    "eslint-config-next": "13.3.1",
    "next": "13.3.1",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.1",
    "typescript": "5.0.4"
  }
}

...
    "paths": {
      "@/*": ["./*"]
    }
...

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
};

module.exports = nextConfig;

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}