The .com from shane98c

Create a custom next.config.js and add webpack resolves

Something I like to do in all of my projects is avoid relative path imports where ever possible.

import {something} from '../../../../something'

versus:

import {something} from '@common/something'

I typically will make two files, a webpack.config.js and a next.config.js that imports the webpack config. The reason there are two is because certain IDEs (webstorm) will find the webpack config automatically and use the aliases to resolve components for you.

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'components'),
      '@containers': path.resolve(__dirname, 'containers'),
      '@common': path.resolve(__dirname, 'common'),
      '@pages': path.resolve(__dirname, 'pages'),
      '@utils': path.resolve(__dirname, 'utils'),
      '@stores': path.resolve(__dirname, 'stores')
    },
  },
};

and then the next.config.js

const path = require('path')
const webpackConfig = require('./webpack.config')

module.exports ={
  webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
    config.resolve = webpackConfig.resolve
    return config
  },
}

To learn more about custom webpack configs -> https://github.com/zeit/next.js/#customizing-webpack-config

check out styled-system and styled-components/react-emotion

I really love styled-system. At first I was super hesitant because I would be doing things similar to how you would use bootstrap, eg add classes like md-center blah blah and it would be super confusing or overwhelming. But it's not! it's super cool and I love it. I mostly use system-components which essentially uses all the functions that styled-system gives, but you just use it as props.

An example:

<div style={{width: '100%', minHeight: '100vh', border: '1px solid black', background: 'white'}}>A div with styles</div>

<Box width={1} minHeight='100vh' border="1px solid black" bg="white">A box with style props</>

you can also pass in arrays to most of the props which will change the value based on the index to the corresponding breakpoint.

Here is a real example from something I am working on:

      <Flex
        position={['fixed', 'relative']}
        width={['100%', '60px', '220px']}
        top={['calc(100% - 60px)', '0']}
        overflow="hidden"
        style={{ flexShrink: 0 }}
        flexDirection={['row', 'column']}
        pt={[0, 3, 4]}
        pr={[0, 3, 5]}
        pl={[0, 3, 4]}
        minHeight={['60px', '100%']}
        maxHeight={['60px', '100%']}
        justifyContent={['center', 'flex-start']}
        bg="#1f1f1f"
        zIndex={9999999}
      > 
           stuff in here
      </Flex>

and I'll often do this ->

const SomeUniqueSetOfProps = (props) => <Box bg="black" px={2} py={3} {...props} />

So rather than doing a new styled-component like I would before, I use either the Box or Flex primitive and then add the style props I want for it, and since I'm passing in props after them on the component, if I need to change it sometime in a one-off situation, it will override, eg:

<SomeUniqueSetOfProps px={4}>the horizontal padding will now be the 4th index instead of the 2nd<SomeUniqueSetOfProps>

shane98c / .com Goto Github PK

.com's Introduction

.com's People

Contributors

Watchers

.com's Issues

Create a custom next.config.js and add webpack resolves

check out styled-system and styled-components/react-emotion

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs