Next.Js Example

Reaction logo animation with React Three Fiber, Nextjs, Tailwind and Styled-components starter

March 15th, 2023

Reaction logo animation with React Three Fiber, Nextjs, Tailwind and Styled-components starter's picture

About:

Reaction logo animation with React Three Fiber, Nextjs, Tailwind and Styled-components starter

Technologies Used:

README.md:

Regarding the new layout system in next@13:

While the app directory is still in beta we are still investigating on the layout implementation, but for now it's more stable to use pages. An alternative branch will be available in the near future with the app directory architecture. It will be accessible through the starter CLI. Contribution is welcome Follow the progress of layout implementation here.

๐Ÿ—ป Features

  • GLSL imports
  • Template for meta data and header
  • Clean code using ESlint and Prettier
  • VSCode debug profiles for the server, Chrome, and Firefox
  • PWA Support

๐Ÿš„ Architecture

Inform the nextjs page that the component is a Threejs component. For that, simply add the canvas property to the parent component.

export default function Page(props) { return <div>Hello !</div> } // Canvas contents go here // It will receive same props as Page component (from getStaticProps, etc.) Page.canvas = (props) => ( <mesh> <boxGeometry /> <meshBasicMaterial color='hotpink' /> </mesh> )

๐ŸŽ›๏ธ Available Scripts

  • yarn dev - Next dev
  • yarn analyze - Generate bundle-analyzer
  • yarn lint - Audit code quality
  • yarn build - Next build
  • yarn start - Next start
  • yarn export - Export to static HTML

โฌ› Stack

How to contribute :

git clone https://github.com/pmndrs/react-three-next && cd react-three-next && yarn install

Maintainers :

Share this:

Nedx ยฉ 2023