How do I use GlobalStyles from styled components in next?

You can use a custom app, by creating a _app.js file in pages directory

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

function MyApp({ Component, pageProps }) {
  return <><GlobalStyle whiteColor /><Component {...pageProps} /></>
}

export default MyApp

Check https://nextjs.org/docs/advanced-features/custom-app