https://github.com/dmijatovic/next-styled-ts

NextJS basic setup with styled components and typescript
https://github.com/dmijatovic/next-styled-ts

Last synced: 10 days ago
JSON representation

NextJS basic setup with styled components and typescript

• Host: GitHub
• URL: https://github.com/dmijatovic/next-styled-ts
• Owner: dmijatovic
• Created: 2020-08-20T15:57:43.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-08-20T19:33:41.000Z (over 4 years ago)
• Last Synced: 2024-11-13T16:54:11.359Z (2 months ago)
• Language: TypeScript
• Size: 151 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# NextJS with typescript and styled components

This is manual setup of nextjs with typescript and styled components. It based on [this article](https://dev.to/rffaguiar/nextjs-typescript-styled-components-1i3m).

## Install types

```bash

# install typescript and types

npm i -D typescript @types/react @types/node

```

## Change file extension to tsx

Change file extension to tsx on all react files.

Create empty tsconfig.json

```bash

# create empty file

touch tsconfig.json

```

## Instal styled-components

```bash

# install styled component

npm i -s styled-components @types/styled-components

# install babel plugin for consitent naming

npm i -D babel-plugin-styled-components

```

## Enable absolute imports

Add baseUrl definition in tsconfig.json to point to the root of the project.

```tsconfig.json

{

 "baseUrl": "."

}

```

## Start next.js

After starting nextjs in dev mode, it will detect typescript and update tsconfig.json

## Enable server side style loading

Create _document.tsx file and past the code

```javascript

import Document from 'next/document'

import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {

  static async getInitialProps(ctx) {

    const sheet = new ServerStyleSheet()

    const originalRenderPage = ctx.renderPage

    try {

      ctx.renderPage = () =>

        originalRenderPage({

          enhanceApp: (App) => (props) =>

            sheet.collectStyles(),

        })

      const initialProps = await Document.getInitialProps(ctx)

      return {

        ...initialProps,

        styles: (

          <>

            {initialProps.styles}

            {sheet.getStyleElement()}

          >

        ),

      }

    } finally {

      sheet.seal()

    }

  }

}

```

## Extend styled-components DefaultTheme type with custom interface

Based on the [documentation from here](https://styled-components.com/docs/api)

Create styled.d.ts file and change default theme types.

```ts

// import original module declarations

import 'styled-components'

// and extend them!

declare module 'styled-components' {

  export interface DefaultTheme {

    fontFamily:string,

    color:{

      primary:{

        main:string

      },

      secondary:{

        main:string

      },

      error:{

        main:string

      },

      background:{

        default:string

      }

    }

  }

}

```