next14) use server에서 use client 컴포넌트를 import해서 사용하는 방법

비디오 동영상 불러오는 것을 client모드로 가져왔음. 

서버모드 컴포넌트

'use server'

// MUI Imports
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import Chip from '@mui/material/Chip'
import Divider from '@mui/material/Divider'
import List from '@mui/material/List'
import ListItem from '@mui/material/ListItem'
import Typography from '@mui/material/Typography'
import useMediaQuery from '@mui/material/useMediaQuery'
import dynamic from 'next/dynamic';

// Components Imports
import CustomAvatar from '@core/components/mui/Avatar'
import CustomIconButton from '@core/components/mui/IconButton'
import { Button } from '@mui/material'

const VideoPlayer = dynamic(() => import('@/components/react-player/'), { ssr: false });

const Details = ({ data }) => {

  return (
    <Card>
      <CardContent className='flex flex-wrap items-center justify-between gap-4'>
        <div>
          <Typography variant='h5'>UI/UX Basic Fundamentals</Typography>
          <Typography>
            Prof. <span className='font-medium text-textPrimary'>Devonne Wallbridge</span>
          </Typography>
        </div>
        <div className='flex items-center gap-4'>
          <Chip label='UI/UX' variant='tonal' size='small' color='error' />
          <i className='tabler-share cursor-pointer' />
          <i className='tabler-bookmarks cursor-pointer' />
        </div>
      </CardContent>
      <CardContent>
        <div className='border rounded'>
          <div className='mli-2 mbs-2 overflow-hidden rounded'>
            <VideoPlayer
                url='https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4'
              />
          </div>
          <div className='flex flex-col gap-6 p-5'>
            <div className='flex flex-col gap-4'>
              <Typography variant='h5'>About this course</Typography>
              <Typography>{data?.about}</Typography>
            </div>
            <Divider />
            <div className='flex flex-col gap-4'>
              <Typography variant='h5'>By the numbers</Typography>
              <div className='flex flex-wrap gap-x-12 gap-y-2'>
                <Button variant='outlined' href='/enroll'>09:00</Button>
              </div>
            </div>
            <Divider />
            <div className='flex flex-col gap-4'>
              <Typography variant='h5'>Description</Typography>
              {data?.description.map((value, index) => (
                <Typography key={index}>{value}</Typography>
              ))}
            </div>
            <Divider />
            <div className='flex flex-col gap-4'>
              <Typography variant='h5'>Instructor</Typography>
              <div className='flex items-center gap-4'>
                <CustomAvatar skin='light-static' color='error' src={data?.instructorAvatar} size={38} />
                <div className='flex flex-col gap-1'>
                  <Typography className='font-medium' color='text.primary'>
                    {data?.instructor}
                  </Typography>
                  <Typography variant='body2'>{data?.instructorPosition}</Typography>
                </div>
              </div>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

export default Details

 

클라이언트모드 컴포넌트

'use client';

import ReactPlayer from 'react-player';

export default function VideoPlayer({ url }) {
  return (
    <ReactPlayer 
      playing 
      controls 
      url={url} 
      width="100%" 
      height="100%" 
    />
  );
}

 

서버모드에서 dynamic으로 불러오는게 신기하다.