[NextJS] Isotope-layout `window is not define` 오류 해결하기

Isotope `window is not define`

`NextJS`에서 `isotope-layout`를 사용하려고 하면, `SSR` 환경에서는 `window is not define` 오류가 발생할 수 있습니다. 그래서 `Isotope`를 사용하는 곳을 `SSR을 풀어주고 다이내믹 링크를 통하여 해결`해볼 수 있습니다.

 

예제

`Home.tsx`

const DynamicPortfolio = dynamic(
  () => import('src/components/Portfolio/portfolio'),
  {
    ssr: false,
  },
)

export default function Home() {
	return (
    	<>
        	 {/* <Navbar /> */}
             {/* ... 등등 */}
             <DynamicPortfolio />
        </>
    )
}

 

`Portfolio.tsx`

declare module Portfolio {
  interface Data {
    label: string
    filter: string
    isActive: boolean
  }
}
export default function Portfolio() {
    const isotope = useRef<Isotope | null>()
    const [filterKey, setFilterKey] = useState('*')
    const [isotopeFilterData, setIsotopeFilterData] = useState<
    Array<Portfolio.Data>>([
        {
          label: 'ALL',
          filter: '*',
          isActive: true,
        },
        {
          label: 'Branding',
          filter: 'brand',
          isActive: false,
        },
        {
          label: 'Mobile App',
          filter: 'web',
          isActive: false,
        },
        {
          label: 'Creative',
          filter: 'graphic',
          isActive: false,
        },
    ])

    const handleFilterKeyChange = (index: number, filter: string) => {
        isotopeFilterData.map((e) => (e.isActive = false))
        isotopeFilterData[index].isActive = true
        setIsotopeFilterData([...isotopeFilterData])
        setFilterKey(filter)
    }

    useEffect(() => {
        setTimeout(() => {
          isotope.current = new Isotope('.filter-container', {
            itemSelector: '.items',
            layoutMode: 'masonry',
          })
          return () => isotope.current?.destroy()
        }, 1000)
    }, [])

    useEffect(() => {
        if (filterKey === '*') {
          isotope.current?.arrange({ filter: `*` })
        } else {
          isotope.current?.arrange({ filter: `.${filterKey}` })
        }
    }, [filterKey])
  
	return (
		<>
        	{/* 필터 */}
            <div className="filter">
              {isotopeFilterData.map((e, i) => (
                <span
                  key={i}
                  className={e.isActive ? 'active' : ''}
                  data-filter={e.filter}
                  onClick={() => handleFilterKeyChange(i, e.filter)}
                >
                  {e.label}
                </span>
              ))}
			</div>
            {/* 본문 */}
            <div className="gallery filter-container full-width">
            <div
              className={`${
                grid === 3
                  ? 'col-lg-4 col-md-6'
                  : grid === 2
                  ? 'col-md-6 lg-mr'
                  : 'col-12'
              } items graphic wow fadeInUp`}
              data-wow-delay=".4s"
            >
                  <div className="item-img">
                    <Link
                      href={`/project-details2/project-details2-dark`}
                      className="imago wow"
                      passHref
                    >
                      <img src="/img/portfolio/portfolio/1/1.jpg" alt={''} />
                      <div className="item-img-overlay"></div>
                    </Link>
                  </div>
                  <div className="cont">
                    <h6>Creativity Demand</h6>
                    <span>
                      <Link href="/works/works-dark">Design</Link>,{' '}
                      <Link href="/works/works-dark">WordPress</Link>
                    </span>
                  </div>
                </div>
        	</div>
		</>
      )
}

예제 코드이지만, 중요한 핵심은 다이나믹 링크를 통한 Import입니다.

 

Isotope 문서

Isotope · Layout modes