All Side/Runtime > BunJS

Bun에서 서버사이드 렌더링 NextJS 간단 사용하기

developerBeluga 2024. 2. 1. 20:57
728x90
반응형

 

 

 

NextJS 준비

 

미리보기에서 동적으로 이미지와 제목을 변경하기 위해 서버사이드 렌더링을 사용하기로 했다.

런타임을 nodejs로 할까 하다가 최근에 계속 bun으로 작업해서 모든 사이드 프로젝트 런타임을 bun으로 통일했다.

 

https://bun.sh/guides/ecosystem/nextjs

살짝 걱정되는건 아직 완벽하게 bun에서 NextJS를 제어하지 못한다는 점이다.

아무래도 NextJS가 NodeJS에 맞춰 개발을 하다보니 그런 것 같다.

 

잘되는지 확인하기 위해 bun run start를 했더니 Error: ENOENT: no such file or directory, open '/WEB/.next/BUILD_ID' 이런 오류를 만나게 됐다.

 

 

공식문서를 보니 bun run dev를 하라고 해서 했다.

오~ 잘 나왔다.

(혹시 이래도 안되면 bun run build 해보시길)

(아래 문서 참고)

https://github.com/vercel/next.js/discussions/57066

 

Error: ENOENT: no such file or directory, open 'E:\projects\almostwiki\my-app\test\my-app\.next\BUILD_ID' · vercel/next.js · D

Link to the code that reproduces this issue https://github.com/LLytho/ENOENT-next To Reproduce npx create-next-app@latest cd my-app npm run build npm run start Results into: [Error: ENOENT: no such...

github.com

 

 

 

 

NextJS 간단하게 사용해보기

https://velog.io/@director20844/Next.js-Pages%EC%99%80-%EB%9D%BC%EC%9A%B0%ED%8C%85

 

Next.js - Pages와 라우팅

굉장히 스타워즈 같은 시작 1. 준비물:pages 폴더 왼쪽은 가장 기본적인 폴더 구조, pages가 있다.오른쪽은 src와 app을 설정한 폴더 구조, pages가 없다. 만일 app 폴더와 src 폴더를 설정하지 않으면, Next

velog.io

이 분의 글을 보고 따라하려고 했는데 뭔가 이상했다.

그건 바로 나한텐 pages라는 폴더가 없다는 것이다!

 

보이는 것과 같이 app만 있을 뿐이다...

(src도 없음^^)

 

https://www.inflearn.com/questions/882151/nextjs-%ED%8F%B4%EB%8D%94%EA%B5%AC%EC%A1%B0-%EB%8B%A4%EB%A5%B4%EC%8B%A0%EB%B6%84-pages-styles-%EC%97%86%EB%8A%94%EB%B6%84

 

nextjs 폴더구조 다르신분(pages/, styles/ 없는분) - 인프런

혹시나 모르실분들이 있을거 같아서 남깁니다.영상에 보이는 구조로 받으시려면npx create-next-app@12.1.0 --typescript ./ 로 하면됩니다.꽤나 당황했네요 ㅎㅎ - 질문 & 답변 | 인프런

www.inflearn.com

왜 그런가 하고 찾아보니 처음 만들때 몇가지를 물어봤는데 그때 Yes, No 한거에 따라 구조가 바뀌는 것 같았다.

그러니 pages 폴더가 없어도 괜찮다!

 

그렇다면 인제 어떻게 Next를 시작하면 될까?

const Router = () => (
  <BrowserRouter>
    <Routes>
      <Route exact path='/main' element={<Main />} />
      <Route exact path='/' element={<Intro />} />
      <Route exact path='/login' element={<Login />} />
      ...
  </BrowserRouter>
);

React의 경우 위와 같이 라우팅 해줬다.

근데 Next는 이럴 필요가 없다 ❗️

 

 

 

Next의 폴더별로 라우팅이 생긴다 👍

위와 같이 app 폴더 아래에 likwe라는 폴더를 만들면 localhost:3000/likwe로 라우팅된다.

여기에서 Next의 약속을 지켜야하는게 있는게 그건 바로 전체 페이지가 될 파일의 이름은 page.tsx 혹은 page.js로 해야한다.

 

const Example = () =>{
    return(<>이곳은 likwe 페이지📑</>)
}

export default Example;

/app/likwe/page.tsx에 있는 곳에 위와 같은 코드를 치고 저장해주면

 

잘 나오는 것을 확인할 수 있다 👍

 

여기에서 혹시 localhost:3000/likwe/love로 해주고 싶다면 어떻게 해야할까?

그럼 likwe 폴더 아래에 love라는 폴더를 만들고 거기에 page.tsx를 생성해주면 된다.

즉, Next에서는 폴더 구조로 라우팅 된다는 것을 알 수 있다.

 

아주 기초적으로 Bun에서 Next 사용하는 방법에 대해 알아봤다.

Next는 처음 사용하기 때문에 Bun 말고 다른 런타임과는 어떻게 다른지 모르겠지만 Bun에서도 잘 되는걸 확인했다.

결정적인 결함이 나타나지 않는 한 계속해서 Bun에서 Next를 돌릴 것 같다.

 

 

 

 

 

 

 

fin.

728x90
반응형