DEV Community: Dharmi Kumbhani

three.js responsive starter template:

Dharmi Kumbhani — Fri, 07 Jan 2022 17:07:07 +0000

Step 1 - Start with the webpack starter file

Step 2 - index.hml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic-Webpack Setup + three.js</title>
</head>
<body>
    <canvas class="webgl"></canvas>
</body>
</html>

Step 3 - Style.css:

html,
body
{
    overflow: hidden;
}
.webgl {
    position: fixed;
    top: 0;
    left: 0;
    outline: 0;
}

Step 4 - Script.js

yarn add three

Get canvas, sizes
new Scene
new Mesh
- Geometry
- Material
scene.add(mesh)
new Camera

scene.add(camera)
new OrbitControls(camera, canvas)
- .enableDamping = true
new WebGLRenderer(camera, canvas)
- setSize
- setPixel Ratio:
- render(scene, camera)
resize event Listner
- update sizes.width/height
- update camera
  - .aspect(size.w/size.h)
  - updateProjectionMatrix()
- update renderer:
  - setsize
  - setpixelRatio
Clock() / Animate()
- new Three.Clock()
- tick() - requestAnimation Frame
  - elapsedTime
  - controls.update() renderer.render(scene, camera)
  - call tick()

import './style.css'
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

/**
 * from dom and window and other objects
 */
// ====== Canvas
const canvas = document.querySelector('.webgl');
// ====== Sizes
 const size = {
    width: window.innerWidth,
    height: window.innerHeight
}

//=====================
/**
 * Scene
 */
const scene = new THREE.Scene();

//======================
/**
 * Mesh
 */
const cubeGeometry = new THREE.BoxBufferGeometry(2, 2, 2)
const cubeMaterial = new THREE.MeshBasicMaterial({
    color: '#00ff00',
})
const cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cubeMesh);

//======================
/**
 * Camera
 */
const camera = new THREE.PerspectiveCamera(45, size.width/size.height, 0.1, 100);
camera.position.x = 4;
camera.position.y = 2;
camera.position.z = 4;
scene.add(camera)

//======================
/**
 * Controls
 */
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true

//======================
/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
})
renderer.setSize(size.width, size.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.render(scene, camera)
// renderer update
window.addEventListener('resize', () => {
    //Update Sizes:
    size.width = window.innerWidth;
    size.height = window.innerHeight;

    //Camera
    camera.aspect = size.width/size.height
    camera.updateProjectionMatrix()

    //Update renderer:
    renderer.setSize(size.width, size.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

//======================
/**
 * Animate
 */
const clock = new THREE.Clock()

const tick = () => {
    const elapsedTime = clock.getElapsedTime()

    //Update Controls
    controls.update()

    renderer.render(scene, camera)

    window.requestAnimationFrame(tick)
}
tick();

Creating the webpack required for three.js

Dharmi Kumbhani — Fri, 07 Jan 2022 16:54:44 +0000

Step 1 - Basic setup:

Go to directory
npm init → Initialise npm
create src folder and put script.js, index.html and style.css in it.

in index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Name</title>
</head>
<body>

</body>
</html>

in script.js add:

import ./style.css

in style.css add:

* {
    margin: 0;
    padding: 0;

PS: We adding just the basic boiler plate.

Step 2 - Webpack Setup

yarn add webpack webpack-cli in CLI to add webpack dependencies: webpack and webpack-cli
Create bundler folder at the same level as src
Create webpack.common.js in it.
Removie "main" from package.json → removing the entry point from package.json to avoid clashes.

Step 3 - Webpack Configuration:

Creating entry and output -> in webpack.common.js

const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, '../src/script.js'),
    output:
    {
        filename: 'bundle.[contenthash].js',
        path: path.resolve(__dirname, '../dist')
    },
        devtool: 'source-map',
}

For testing in package.json add the following scripts:

"scripts": {
    "test": "webpack --config ./bundler/webpack.common.js",
},

here we are specifing that instead of having a webpack.config.js file in our root folder we have seperated it on to a bundler folder.

You can run npm run test any time in between to see the output in the dist folder

Step 4 - Installing loaders, plugins and writing corresponding rules for webpack configuration:

How to write rules?

module.exports = {
    entry: path.resolve(__dirname, '../src/script.js'),
    output:
    {
        filename: 'bundle.[contenthash].js',
        path: path.resolve(__dirname, '../dist')
    },
        devtool: 'source-map',
    module: {
        rules: [
            …
        ]
    }
};

Adding Plugins:

Require them at the top of javascript file:
Declaring the plugin: Add the plugin key as a property of the modules.export object and its value is an array where we declare the plugins along with configurations (if any)

module.exports = {
    entry: path.resolve(__dirname, '../src/script.js'),
    output:
    {
        filename: 'bundle.[contenthash].js',
        path: path.resolve(__dirname, '../dist')
    },
        devtool: 'source-map',
        plugins:[
        ...
    ],
    module: {
        rules: [
            …
        ]
    }
};

HTML support in webpack: yarn add html-webpack-plugin: This is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation.

Require the plugin:

const HtmlWebpackPlugin = require('html-webpack-plugin')

Add Plugin:

plugins:[
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, '../src/index.html'),
        minify: true
    }),
],

yarn add html-loader
Append this rule in the rules array

//HTMl:
{
    test: /\.(html)$/,
    use: ['html-loader']
},

Doing this will now output an html file as well in the dist folder.

JS support in webpack:

yarn add @babel/core
yarn add @babel/preset-env
yarn add babel-loader

(Currently we are adding them as user dependencies but we can change it to dev dependencies)

//JS
{
    test: /\.js$/,
    exclude: /node_modules/,
    use:[
        'babel-loader'
    ]
},

CSS support in webpack:

yarn add mini-css-extract-plugin

yarn add css-loader

Require the dependency at the top of the page.

const MiniCSSExtractPlugin = require('mini-css-extract-plugin')

Declaring the plugin

plugins:
[
    new MiniCSSExtractPlugin()
],

Add the following rule:

// CSS
{
    test: /\.css$/,
    use:
    [
        MiniCSSExtractPlugin.loader,
        'css-loader'
    ]
},

More Information: Learn Webpack Pt. 8: Html-loader, File-loader, & Clean-webpack

Step 5 - Adding `file-loader` other loaders for handeling fonts and images

yarn add file-loader
Add the following rules for working with images and fonts being used in the app.

// Images
{
    test: /\.(jpg|png|gif|svg)$/,
    use:
    [
        {
            loader: 'file-loader',
            options: {
                outputPath: 'assets/images/'
            }
        }
    ]
},

// Fonts
{
    test: /\.(ttf|eot|woff|woff2)$/,
    use:
    [
        {
            loader: 'file-loader',
            options: {
                outputPath: 'assets/fonts/'
            }
        }
    ]
},

In options we are specifying that after building the app, put images, fonts in the assets folder.

When we run a npm run build to create a production ready distribution folder, webpack will browse through your code and as soon as it finds something like image or fonts, it will automatically create an asset folder inside which there will be an image folder to store that imported image and there will be an font folder in assets created to store its corresponding font.

Step 6 - Adding `copy-webpack-plugin`:**

Copies individual files or entire directories, which already exist, to the build directory.

The idea here is you will have a static folder in dev where you will store all your fonts, images, etc, and in prod build you want this to be all copied in the build folder.

Without this plugin, in the final production folder that is created, only those images will be bundles that are imported in the javascript.

Also make sure from now on you have atleast one image inside the static folder, else it will trown an error.

The structure inside the static folder will be replicated in the dist (production build) folder.

Make sure you create a static folder first.

yarn add copy-webpack-plugin
Require/import it:

const CopyWebpackPlugin = require('copy-webpack-plugin')

Declare it:

plugins:[
    new CopyWebpackPlugin({
        patterns: [
            { from: path.resolve(__dirname, '../static') }
        ]
    }),
    ....
],

Here, From now on make sure that there is a test image in your static folder else building it (npm run test) will result in an error.

Step 7 - Creating Dev Configuration: to start a live server.

We will use webpack.common.js a commn configuration that will be used by for the dev and prod configurations:

In Dev server, files get build in memory and are destroyed as soon as the server id destroyed.

Create a webpack.dev.js file in bundler folder
Importing commonConfiguration from webpack.common.js To import we will need webpack-merge module
yarn add webpack-merge
Adding basic things to webpack.dev.js

const { merge } = require('webpack-merge')
const commonConfiguration = require('./webpack.common.js')
module.exports = merge(
    commonConfiguration,
    {
        mode: 'development'
    }
)

Adding dev script in package.json

"scripts": {
  "test": "webpack --config ./bundler/webpack.common.js",
  "dev": "webpack serve --config ./bundler/webpack.dev.js",
},

here the serve flag will make it live reload, but before running it, there are still a few things we need to add to serve this app.

Adding Server Dependencies.
yarn add portfinder-sync > Find an open port synchronously.
yarn add D webpack-dev-server

Dev Server for web applications, ideal for buildless es module workflows. Optionally supports simple code transformations.
This is added so now the webpack 'serve' command is recognised
Updating wepack dev:
Importing required modules:

const ip = require('internal-ip')
const portFinderSync = require('portfinder-sync')

Function that prints local domain (where server is running) names distinctly:

const infoColor = (_message) => {
    return `\u001b[1m\u001b[34m${_message}\u001b[39m\u001b[22m`
}

Adding devServer key to module exports:

devServer: {
  host: '0.0.0.0',
  port: portFinderSync.getPort(8080),
  contentBase: './dist',
  watchContentBase: true,
  open: true,
  https: false,
  useLocalIp: true,
  disableHostCheck: true,
  overlay: true,
  noInfo: true,
  after: function(app, server, compiler)
  {
      const port = server.options.port
      const https = server.options.https ? 's' : ''
      const localIp = ip.v4.sync()
      const domain1 = `http${https}://${localIp}:${port}`
      const domain2 = `http${https}://localhost:${port}`

      console.log(`Project running at:\n  - ${infoColor(domain1)}\n  - ${infoColor(domain2)}`)
  }
}

Try running npm run dev and you should see a live server being sprung up! and this is now live updating with all the changes you make!

Step 8 - Creating build Configuration: to creat a production ready dist folder.

Creating a production configuration file in bundlers folder: bundlers → webpack.prod.js
Adding basic configurations to webpack.prod.js:

const { merge } = require('webpack-merge')
const commonConfiguration = require('./webpack.common.js')

module.exports = merge(
    commonConfiguration,
    {
        mode: 'production',
    }
)

It will use the same merge and commonConfiguration as dev configuration. We will just change the mode.

Adding Plugin:
yarn add clean-webpack-plugin > A webpack plugin to remove/clean your build folder(s). It makes sure that there is no dist folder.

Importing and Declating Plugin in the webpack production configuration:

const { merge } = require('webpack-merge')
const commonConfiguration = require('./webpack.common.js')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = merge(
    commonConfiguration,
    {
        mode: 'production',
        plugins:
        [
            new CleanWebpackPlugin()
        ]
    }
)

Add scripts to package.json for a build command.

"scripts": {
  "test": "webpack --config ./bundler/webpack.common.js",
  "dev": "webpack serve --config ./bundler/webpack.dev.js",
  "build": "webpack --config ./bundler/webpack.prod.js"
},

And that should be it, try running npm run build and check the dist folder that would have been created.

Step 9 - Adding raw-loader for loading shaders:

yarn add raw-loader
Webapack rules:

// Shaders
{
    test: /\.(glsl|vs|fs|vert|frag)$/,
    exclude: /node_modules/,
    use: [
        'raw-loader'
    ]
}

Resources:
Webpack - A Detailed Introduction - Smashing Magazine
Notion version of this blogpost
A lot of the webpack configurations were inspired by Bruno Simons template, which he uses for his fabulous course - Three.js Journey

🖋Adding Fonts in Next.js (local fonts along with styled components)

Dharmi Kumbhani — Fri, 07 Jan 2022 12:41:21 +0000

Step 1 - Creating a Next.js application

I just like all my development folders to be on Desktop so i do cd Desktop



cd Desktop
npx create-next-app
//Running this script on the folder you want to store the project folder
* Will ask you whats your project name? projectName
/*
Enter the project name and it will create a folder with that name along 
with all the neccessary files
*/

Step 2 - Adding custom fonts (local)

📁 pages

📁 public

⠀⠀⠀📁 fonts

⠀⠀⠀⠀⠀⠀fontName-style.woff

Step 3 - Preloading these fonts in _document.js.

Create _document.js file if you haven’t already and add the following code it preloads the font inside the Head.

If you are not using styled-component you should remove everything starting from static till render()

_document.js



import Document, {Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
//--------------For styled-components only------------//
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
//---------------------------------------------------//
  render() {
    return (
        <Html lang="en">
            <Head>
                <link
                  rel="preload"
                  href="/fonts/ProximaNova-Bold.woff"
                  as="font"
                  type="font/woff"
                  crossOrigin=""
                />
                <link
                  rel="preload"
                  href="/fonts/ProximaNova-Regular.woff"
                  as="font"
                  type="font/woff"
                  crossOrigin=""
                />
            </Head>
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    );
}
}

All that is important here is that tag inside Head.
PS: Html =/= html

this 'Html" is common one for all the pages.

It is recommended that for using title and meta you do it inside a specific page's
Also if you are not sure what all the code outside render means, i am using styled-component as my preferred choice for styling so that code is just for getting styled-components to work on Server side. Check out this blog to understand styled-components in Next.js for more details.

Extra:

Short answer: Yes, You can use both. They serve different purpose and can be used in the same application.

According to nextjs website:

Next.js uses the App component to initialize pages.To override, create the ./pages/_app.js file and override the App class

and

Pages in Next.js skip the definition of the surrounding document's markup. For example, you never include ,
, etc. To override that default behavior, you must create a file at ./pages/_document.js, where you can extend the Document class.

Note: _document.js is only rendered on the server side and not on the client side. so event handlers like onClick is not going to work.

Step 4 - Declaring them globally

(again this is using style-components. Read more

create a _app.js file in your pages folder if its not already and add the . following:



import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
    @font-face {
    font-family: 'ProximaNova-Regular';
    src: url('/fonts/ProximaNova-Regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }
  @font-face {
    font-family: 'ProximaNova-Bold';
    src: url('/fonts/ProximaNova-Bold.woff') format('woff');
    font-style: bold;
    font-weight: 700;
    font-display: swap;
  }
`;

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

export default MyApp

Whats happening here?

In my global styles i am declaring @font-face and the source of each face is pointing to the url of the font-faces inside the font folder we just created.

Take care using @font-face, each font-family name is different and in accordance to the actual font file.
font-display is kept to swap.

Now here if you are interested in knowing what font display actually does Check out this article on CSS-tricks also this is helpful in understanding FOUT and FINT which you can read more about over here.

Thats it! Test it.

Now you add the following code inside index.js

index.js:



import Head from 'next/head'
// import styles from '../styles/Home.module.css'
import styled from  'styled-components';
const Test1 = styled.p`
  font-size: 40px;
  font-family: 'ProximaNova-Regular';
  color: #00688B;
`;
const Test2 = styled.p`
  font-size: 40px;
  font-family: 'ProximaNova-Bold';
  color: #00688B;
`;

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <Test1>Test1</Test1>
        <Test2>Test2</Test2>
      </main>
    </div>
  )

Once this is added go to your terminal inside your folder and run:



$ yarn dev
// $ just mean run it inside your bash terminal you just need to copy "yarn dev"

Once this is done go to https://localhost.3000 and see your next.js app running.

Helpful Debugging:

Check for Safari developer tools and Google Chrome developer tools:

If you see a fonts folder in there and inside them if you can see font file. That most probably means your fontfiles have been successfully be served and it is good to go.

Safari:

Google Chrome:

Important Links

Keep looking at this open source repository of Next.js actual site. https://github.com/vercel/next-site

Specifically look at how they have declared fonts inside /styles/fonts.js and are calling it inside _app.js
If you observe closely there might be flashing of fonts happening in your project - Look more into FOUT (Flash of Unstyled Text) and FOIT (Flash of Invisible Text) https://leerob.io/blog/things-ive-learned-building-nextjs-apps
I even found this repository that uses the same libraries (next + styled components) you can have a look at it for any updates.

Some mistakes i made:

Before trying anything else i used a library called next-fonts and they had created a next.config.js file. However at the time of speaking the library is deprecated and you can directly use fonts without any library.

This file uses two libraries:

next-fonts
@zeit/next-css



const withCss = require("@zeit/next-css");
const withFonts = require("next-fonts");

module.exports = withFonts(
  withCss({
    webpack: (config, { isServer }) => {
      if (isServer) {
        const antStyles = /antd\/.*?\/style\/css.*?/;
        const origExternals = [...config.externals];
        config.externals = [
          (context, request, callback) => {
            if (request.match(antStyles)) return callback();
            if (typeof origExternals[0] === "function") {
              origExternals[0](context, request, callback);
            } else {
              callback();
            }
          },
          ...(typeof origExternals[0] === "function" ? [] : origExternals)
        ];

        config.module.rules.unshift({
          test: antStyles,
          use: "null-loader"
        });
      }
      return config;
    }
  })
);

or just install @zeit/next-css



const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})

The point of this file is to stop css modules to render and prevent any conflicts. But i personally haven't used it for my own site.

Links that helped me make this possible:

https://stackoverflow.com/questions/60841540/flash-of-unstyled-text-fout-on-reload-using-next-js-and-styled-components

https://codeconqueror.com/blog/using-google-fonts-with-next-js

https://leerob.io/blog/things-ive-learned-building-nextjs-apps

https://github.com/styled-components/styled-components/issues/3224

How to avoid layout shifts caused by web fonts

💅 Setting up styled components with Next.js 9.5.2

Dharmi Kumbhani — Fri, 07 Jan 2022 12:10:46 +0000

Step 1 - Creating a Next.js application

I just like all my development folders to be on Desktop so i do cd Desktop

cd Desktop
npx create-next-app
//Running this script on the folder you want to store the project folder
* Will ask you whats your project name? projectName
/*
Enter the project name and it will create a folder with that name along 
with all the neccessary files
*/

Step 2 - Adding styled-components library

yarn add styled-components

Step 3 - Adding developer dependency

yarn add -D babel-plugin-styled-components

-D flag is used for adding the library as a developer dependency.

Step 4 - Creating .babelrc file

To put things into perspective when working with styled components along with SSR it creates a hash (unique names) and that can get a bit tricky while debugging. This file does the following 2 things

Let's babel know that styled components is to be rendered on the server side.
Turns displayName to true so that you can make the className more familiar.

Full documentation of the plugin can be found here: https://styled-components.com/docs/tooling#babel-plugin

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true, "displayName": true}]]
}

i have seen a environment version of the same like this :

this was used so to prevent props className warning/error but however this error pops up sometimes even after adding this file.

You can track this issue here: https://github.com/vercel/next.js/issues/16637

{
   "env": {
      "development": {
         "plugins": [
            [
               "styled-components",
               { "ssr": true, "displayName": true, "preprocess": false }
            ]
         ],
         "presets": ["next/babel"]
      },
      "production": {
         "plugins": [
            [
               "styled-components",
               { "ssr": true, "displayName": true, "preprocess": false }
            ]
         ],
         "presets": ["next/babel"]
      }
   },
   "plugins": [
      [
         "styled-components",
         { "ssr": true, "displayName": true, "preprocess": false }
      ]
   ]
}

Step 5 - Creating _document.js

Create a file named "_document.js" inside your pages folder. This overrides the default Document file that is made in

A custom Document is commonly used to augment your application's and
tags. This is necessary because Next.js pages skip the definition of the surrounding document's markup.
To override the default Document, create the file ./pages/_document.js and extend the Document class as shown below:

You can find more on this here: https://nextjs.org/docs/advanced-features/custom-document

import Document, {Html, Head, Main, NextScript } 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(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
  render() {
    return (
        <Html lang="en">
            <Head />
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    );
}
}

The collectStyles method wraps your element in a provider.

getStyleElement() method that returns an array of React elements.

Know more about what is severSideRendering https://styled-components.com/docs/advanced#server-side-rendering

Thats it! Test it.

Now you add the following code inside index.js

index.js:

import Head from 'next/head'
import styled from  'styled-components';
// Creating a styled-component
const Test = styled.p`
  font-size: 40px;
  color: blue;
`;
export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
                {/*Testing Styled component */}
        <Test>Hello</Test>
      </main>
    </div>
  )
};

Once this is added go to your terminal inside your folder and run:

$ yarn dev
// $ just mean run it inside your bash terminal you just need to copy "yarn dev"

Once this is done go to https://localhost.3000 and see your next.js app running.

Extras: How to use Global Styles with styled components

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
    p {
    font-size: 20;
  }
`;

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

export default MyApp

Important Pointer:

If your are watching this in future post release of Next.js 9.5.2 and its not working for some reason this is a repository that you would want to keep an eye out for any changes : https://github.com/vercel/next.js/tree/master/examples/with-styled-components

Other resources:

https://codesandbox.io/s/github/zeit/next.js/tree/canary/examples/with-styled-components?file=/pages/index.js

https://dev.to/rffaguiar/nextjs-typescript-styled-components-1i3m#bonus1

https://nextjs.org/learn/basics/assets-metadata-css/global-styles (Use this even for SVG icons)

DEV Community: Dharmi Kumbhani

three.js responsive starter template:

Step 1 - Start with the webpack starter file

Step 2 - index.hml

Step 3 - Style.css:

Step 4 - Script.js

Creating the webpack required for three.js

Step 1 - Basic setup:

Step 2 - Webpack Setup

Step 3 - Webpack Configuration:

Step 4 - Installing loaders, plugins and writing corresponding rules for webpack configuration:

Step 5 - Adding file-loader other loaders for handeling fonts and images

Step 6 - Adding copy-webpack-plugin:**

Step 7 - Creating Dev Configuration: to start a live server.

Step 8 - Creating build Configuration: to creat a production ready dist folder.

Step 9 - Adding raw-loader for loading shaders:

🖋Adding Fonts in Next.js (local fonts along with styled components)

Step 1 - Creating a Next.js application

Step 2 - Adding custom fonts (local)

Step 3 - Preloading these fonts in _document.js.

_document.js

Extra:

Step 4 - Declaring them globally

create a _app.js file in your pages folder if its not already and add the . following:

Thats it! Test it.

index.js:

Helpful Debugging:

Important Links

Some mistakes i made:

Links that helped me make this possible:

💅 Setting up styled components with Next.js 9.5.2

Step 1 - Creating a Next.js application

Step 2 - Adding styled-components library

Step 3 - Adding developer dependency

Step 4 - Creating .babelrc file

Step 5 - Creating _document.js

Thats it! Test it.

index.js:

Extras: How to use Global Styles with styled components

Important Pointer:

Other resources:

Step 5 - Adding `file-loader` other loaders for handeling fonts and images

Step 6 - Adding `copy-webpack-plugin`:**