Setup a Server-rendered ReactJS Application with Next.js + Typescript + Sass

3 min readJul 9, 2018

Easy way to create server-rendered web application for ReactJS with Next.js using typescript and sass

React + Next.js

First one create folder name is hello-nextjs or whatever if you want 😄. After that go to hello-nextjs folder to create package.json and also install react, react-dom, next

mkdir hello-nextjs # create project folder
npm init -y # create package.json
npm install react react-dom next --save

Create pages component

mkdir pages
cd pages

Create a pages/_app.tsx in your project

import App, {Container} from 'next/app'
import React from 'react'

export default class MyApp extends App {
  static async getInitialProps ({ Component, router, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return {pageProps}
  }

  render () {
    const {Component, pageProps} = this.props
    return <Container>
      <Component {...pageProps} />
    </Container>
  }
}

Create a pages/_document.tsx in your project

import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <html>
        <Head>
          <style>{`body { margin: 0 } /* custom! */`}</style>
        </Head>
        <body className="custom_class">
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

Create a pages/index.tsx in your project

import React from 'react';export default class extends React.Component {
  render() {    
    return (
      <div>
        Hello Next.js
      </div>
    )
  }
}

Every .tsx file becomes a route inside /pages in directory. 🆒

├── /pages
│ ├── index.js # http://localhost:3000
│ └── user.js  # http://localhost:3000/user

Add this script to your package.json

"dev": "next"

Run npm run dev and go to http://localhost:3000.

npm run dev

😄 *Hello Next.js it show up on your browser now!*

Next.js + Typescript

Installation

npm install --save @zeit/next-typescript @types/next @types/react@types/react-dom

Create a next.config.js in your project

// next.config.js
const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript()

Create a .babelrc.js in your project

module.exports = {
   presets: ['next/babel', '@zeit/next-typescript/babel']
}

Create a tsconfig.json in your project

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "lib": [
      "dom",
      "es2016"
    ]
  }
}

Next.js + Sass

Installation

npm install --save @zeit/next-sass node-sass

The stylesheet is compiled to .next/static/style.css. You have to include it into the page using a custom _document.tsx. The file will be served from /_next/static/style.css

// ./pages/_document.tsx
import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head>
          <link rel="stylesheet" href="/_next/static/style.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

Update code in a next.config.js file

const withTypescript = require('@zeit/next-typescript')
const withSass = require('@zeit/next-sass')module.exports = withTypescript(withSass())

Create a Sass file styles.scss

.title {
  color: red;
}

Imports your stylesheet and uses the hashed class in pages/index.tsx

import React from 'react';
import '../styles.scss'export default class extends React.Component {
  render() {    
    return (
      <div className="title">
        Hello Next.js
      </div>
    )
  }
}

Then run npm run devafte that go to http://localhost:3000.

npm run dev

Setup a Server-rendered ReactJS Application with Next.js + Typescript + Sass

Written by Min