timneutkens

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  experimental: {
    turbo: {
      rules: {
        './pages/**/*.tsx': {
          loaders: [require.resolve('./test-file-loader.js')],
          as: '*.tsx'

timneutkens

turbo: {
  rules: {
    '*.mdx': {
      loaders: ['turbopack-mdx-loader'],
      as: '*.tsx',
    },
  },
},

timneutkens

// https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
function iteratorToStream(iterator: any) {
  return new ReadableStream({
    async pull(controller) {
      const { value, done } = await iterator.next()

      if (done) {
        controller.close()
      } else {
        controller.enqueue(value)

timneutkens

import {useState, useEffect} from 'react'

function useMounted() {
  const [isMounted, setMounted] = useState(false)
  useEffect(() => setMounted(true), [])
  return isMounted
}

// const isMounted = useMounted()

timneutkens

require('dotenv').config();

const withCSS = require('@zeit/next-css');
const path = require('path');
const Dotenv = require('dotenv-webpack');
const withImages = require('next-images');
const withTypescript = require('@zeit/next-typescript');
const withOffline = require('next-offline');
const {PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_BUILD} = require('next/constants')

timneutkens

const TOP_PATHS = new Set(
  readdirSync(join(__dirname, '..', 'pages'))
    .map(f => f.replace(/\.js$/, ''))
    .concat(['', 'static', '_next'])
)



function topRoutesMiddleware(req, res, goNext) {
  const topPath = req.path.split('/', 2)[1]

timneutkens

export default function importScript(src) {
  return new Promise((resolve, reject) => {
    const loaded = Boolean(document.querySelector(`script[src="${src}"]`))
    if (loaded) return resolve()

    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = src
    script.async = true

timneutkens

import React from 'react'
import PropTypes from 'prop-types'
import { ApolloProvider, getDataFromTree } from 'react-apollo'
import Head from 'next/head'
import initApollo from './initApollo'

// Gets the display name of a JSX component for dev tools
function getComponentDisplayName (Component) {
  return Component.displayName || Component.name || 'Unknown'
}

timneutkens

New Results:

sorted by rerender time

Solution	Use CSS	Use Inline-Styles	Mount Time (ms)	Rerender time (ms)
react (without styles)	-	-	16.11	29.96
styled-jsx-static	+	-	25.27	42.24
emotion-extract-static	+	+	52.29	44.79
react-css	+	+	28.17	46.18
styletron	+	-	53.03	47.36

timneutkens

const yourArray = [1,2,1,3,3]
Array.from(new Set(yourArray)) // [1,2,3]