개발 연습 블로그

url에서 데이터를 가져오는 방법을 nextjs15에서는 프로미스로 관리한다. 그래서 async/await가 필요하다.(서버단에서 해결할 것이면) 위에 타입은 무시해도 된다. 14버전 방식으로 하다가 꼬인 것이다. 15버전에서도 쓸 수 있지만 크게 의미없어 보인다. 15 버전에서는 이렇게 async/await로 작동시켜야 서버단에서 해결이 가능하다. 클라단에서 해결하고 싶다면 "use client"로 React.use를 사용해야 한다.

레이아웃은 기존 리액트의 리액트-라우터에 쓰던 방식과 비슷하게 작동한다.(내가 배운게 맞다면)import React from "react";import { BrowserRouter, Route, Routes } from "react-router-dom";import Main from '../pages/Main';import { styled } from 'styled-components';import Header from "../components/Header";import { scroller } from "react-scroll";import Test from "../pages/Test";const Router = () => { const scrollToComponent = (componentId: s..

nextjs가 리액트와 다른 점은 여러가지가 있지만 가장 인상적인 것은 라우팅 구조라고 생각한다. 기본적인 리액트는 리액트-라우터로 Shared 폴더에 Router파일을 만들고 import React from "react";import { BrowserRouter, Route, Routes } from "react-router-dom";import Main from '../pages/Main';import { styled } from 'styled-components';import Header from "../components/Header";import { scroller } from "react-scroll";import Test from "../pages/Test";const Router = () ..

일단 기본적으로 설치하는 방식은 기존과 동일하다. 프로젝트 폴더를 생성한 다음 npm init -ynpm install npm install react@latest next@latest react-dom@latest app 폴더 생성기초적인 page파일 생성기초적인 layout파일 생성기초적인 component파일 생성 이걸로 기본 세팅은 끝이다.