DEV Community: Axel Valdez

Integrar Styled-Components a un proyecto NextJs con TypeScript

Axel Valdez — Mon, 20 Sep 2021 20:48:07 +0000

Integrar Styled Components a un proyecto Next.Js puede ser un tramite medio molesto pero con este tutorial a la criolla lo vas hacer en un toque y sin preocupaciones.

1- Tenemos que instalar nuestras dependencias de styled al igual que los types del mismo.

yarn add styled-components
yarn add @types/styled-components -D

2- Creamos un archivo babel.config.js y vamos a copiar este código

module.exports = {
  presets: ['next/babel'],
  plugins: [['styled-components', { ssr: true }]]
}

3- Vamos a crear varios archivos ts/tsx y, si podemos, mantenemos las carpetas en este orden

src
- styles
  - global.ts
  - style.d.ts
  - theme.ts
- pages
  - _document.tsx
  - _app.tsx

En el archivo _document.ts escribimos el siguiente código

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

export default class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    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(): JSX.Element {
    return (
      <Html lang="en"> // o es dependiendo su idioma
        <Head>
            // aca irian los links y metas 
              // que adjuntamos en el head

          <meta charSet="utf-8" />
          <link rel="preload" href="https://fonts.googleapis.com/" />
          <link
            rel="stylesheet" 
            href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;400&display=swap"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

Una vez hecho eso empezamos a definir nuestro theme theme.ts y theme global global.ts

theme.ts (disclaimer: esto es a elección del proyecto obviamente, aca solo hardcodee el color, pero también podemos definir la tipografía entre otras cosas mas que forman parte de la User Interface)

const theme = {
  colors: {
    background: '#202124',
    text: '#fff'
  }
}

export default theme

global.ts

import { createGlobalStyle } from 'styled-components'

export default createGlobalStyle`
  *{
    margin: 0;
    padding:0;
    box-sizing:border-box
  }
  html {
    height: 100%;
  }
  body {
    color: ${props => props.theme.colors.text};
    background: ${props => props.theme.colors.background};
    font: 400 16px Josefin Sans, sans-serif;
    height: 100%;
  }
  h1 {
    font: 100 64px Josefin Sans, sans-serif;
  }
  #__next {
  height: 100%;
  }
`

Una vez hecho esto, tenemos que crear nuestro archivo style.d.ts para poder trabajar facilmente a la hora de leer nuestro theme

/* eslint @typescript-eslint/no-empty-interface: "off" */
import 'styled-components'
import theme from './theme'

export type Theme = typeof theme

declare module 'styled-components' {
  export interface DefaultTheme extends Theme {}
}

Ya hechos la mayoria de nuestros archivos, procedemos a actualizar el archivo _app.tsx utilizando el ThemeProvider, el GlobalStyle definido en el global y nuestro theme.

import React from 'react'
import { AppProps } from 'next/app'
import GlobalStyle from '../styles/global'
import { ThemeProvider } from 'styled-components'
import theme from '../styles/theme'

const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
      <GlobalStyle />
    </ThemeProvider>
  )
}

export default MyApp

Hecho todo esto ya podemos trabajar tranquilamente con styled components en NextJs con TypeScript. 💅🏼💅🏼

Happy Codinggg✨✨✨

Fuente donde me inspiré y seguí los pasos: https://www.youtube.com/watch?v=1nVUfZg2dSA&t=1780s

Suscribanse a Rocketseat, tienen muy buen contenido!

Instalar Tailwind via CLI junto con PostCSS & CSSnano

Axel Valdez — Tue, 06 Jul 2021 14:03:09 +0000

Lo bueno de tailwind css es que podemos instalarlo de diferentes maneras, entre ellas, via CDN o via CLI. En este caso, vamos a hacerlo via npm o yarn o el gestor de paquetes de su preferencia.

Paso 1: armar nuestro entorno

En mi caso, voy a instalarlo mientras uso un framework de js llamado mithril (donde hablare en algun post proximo que se viene). Para continuar con nuestra instalación vamos armar nuestro entorno y el output (ambos deben tener la carpeta css, muy importante).

Paso 2: instalar tailwind

Procedemos a instalar nuestras dependencias en nuestra terminal amiga con los siguientes comandos

yarn add tailwindcss postcss postcss-cli autoprefixer --dev
yarn add @tailwindcss/forms

Paso 4: creamos nuestro archivo tailwind.config.js junto con nuestro postcss.config.js via terminal

npx tailwindcss init -p

Paso 5: vamos a integrar cssnano para minificar nuestro css de desarrollo

yarn add cssnano

Paso 6: copiamos y pegamos este codigo en postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("cssnano")({
      preset: "default",
    }),
    require("autoprefixer"),
  ],
};

Paso 7: Agregamos tailwind/forms a nuestro tailwind.config.js

module.exports = {
  purge: ["./*.html", "./*.js"], 
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require("@tailwindcss/forms")],
};

Paso 8: Creamos nuestro html

<!DOCTYPE html>
<html lang="es">

<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>Template Tailwind</title>
  <link rel="stylesheet" href="css/tailwind.css" />
</head>

<body>
  <script type="text/javascript" src="js/App.js"></script>
</body>

</html>

Paso 9: creamos nuestro archivo tailwind.css en nuestro entorno y hacemos un copy / paste de este codigo

@tailwind base;
@tailwind components;
@tailwind utilities;

Paso 10: Agregamos nuestros scripts en nuestro package.json

{
  "scripts": {
    "tail": "postcss tailwind.css -o ./output/css/tailwind.css",
  }
}

Si querés chusmear como quedo mi entorno metete a este repo :)

https://github.com/axelvaldez13/tailwindcli

Que es Git Flow y porque tenemos que aprenderlo

Axel Valdez — Tue, 15 Jun 2021 00:37:08 +0000

Todos damos por entendido que es git y, para quienes no lo saben, esto sirve para hacer un control de versionado sobre tu código. Escribiéndolo así a lo criollo: sirve para poder trabajar código de manera mas eficiente donde lo aloja una repo y de ahí varios desarrolladores clonan tal repo y lo modifican a su gusto o semejanza.

Disclaimer: pido disculpas por la foto que elegí de portada, busque una foto que haya sacado con ramas y encontré esta de un viaje a Iguazú. Para la próxima espero poder encontrar una adecuada.

Los comandos mas reconocibles que tenemos en git son:

Git init
// Para iniciar entorno git

Git status
// Para saber el status de nuestra version

Git pull
// Para actualizar nuestra rama con nuestra ultima version

Git clone
// Para clonar un repositorio

Git checkout
// Para cambiar de rama a otra

Git push
// Para mandar nuestra version a la rama que queremos

Pasemos a Gitflow

Gitflow es un flujo de trabajo que trabaja con las metodologías ágiles y se compone de diferentes tipos de ramas: la master y la dev que son las mas conocidas por todo el mundo de desarrollo pero a esto le agregamos hotfix y feature. Pasemos a explicar todo:

Master
Acá ya es producción, todo lo que pasa acá lo ve el usuario final. Hablándolo en criollo: es la pagina final, fin de la historia

Dev
Todo lo que nosotros vemos y probamos antes de mandarnos de lleno a producción. Si primero nos tenemos que mandar un moco, el primer lugar va a ser en desarrollo. Cuando este todo funcional y sin desperfectos, lo mandamos a prod.

Feature
Esta rama nos sirve para crear una nueva función o feature a nuestro desarrollo para posteriormente mandar un merge request a nuestra rama dev. En simples palabras, creo algo en una rama llamada feature y lo mando a dev para ver si se rompe todo o si funciona bien.

Hotfix
Esta rama es más que nada para arreglar algo rápido siempre y cuando no sea tan complejo (modificacion de texto, boton, etc). Se crea desde la rama master y se mergea en dev, en caso de estar todo bien, se da el merge a master.

Tal como lo dice la palabra, es un arreglo en caliente. Si entienden el chiste de arreglos en producción, van a saber qué viene de esta palabra.

Pasos para crear un entorno con gitflow

Primero tienen que iniciar gitflow y nombran las ramas a su preferencia.

git flow init
// para iniciar gitflow a tu repo

En el primero van a llamar a la rama master, que en este caso, seria producción. Dependiendo donde sea su repo, posiblemente sea main o master. En github aparece como main así que vamos a escribir en esta opción como main

En el segundo paso nos va a pedir como se va a llamar la rama de desarrollo así que vamos a nombrarla como dev

Y por ultimo dejamos tal cual como están las siguientes ramas que serian feature, release, hotfix, y demás.

Los pasos para crear una nueva rama tanto en hotfix como en feature son los siguientes:

git flow feature start "nombre del branch"
// para crear una rama en feature

git flow hotfix start "nombre del branch"
// para crear una rama en hotfix

Eso es todo, happy coding✨✨

Como integrar ESLint y Prettier a un projecto Next.Js con Typescript

Axel Valdez — Mon, 26 Apr 2021 15:52:06 +0000

La manera mas facil de integrar ESLint y Prettier a mi projecto Next.Js paso a paso. Importante, debemos tener instalados los complementos de ESLint, Prettier y EditorConfig en VSCODE.

1 - Abrimos nuestro settings.json y agregamos la siguiente linea

"eslint.validate": ["typescript", "typescriptreact"],
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},

2 - Creamos nuestro projecto

yarn create next-app {{nombre}}

3 - Instalamos TypeScript

yarn add typescript @types/react @types/node -D

Ya instalado TS vamos a cambiarle la nomenclatura a nuestros archivos JS a TSX. Posterior a eso, corremos nuestro proyecto y mismo Next va a darse cuenta que hay archivos TS y va hacer todo el config.

Hecho esto, vamos a proceder a eliminar carpetas que no nos van a servir como Public, Styles (despues vamos a crear uno parecido) y Api. Ya hecho esto vamos a notar que se va a romper todo pero vamos a solucionar esto

4 - Instalamos ESLint y lo iniciamos. Ahi mismo nos va a crear un .eslintrc.json del cual posteriormente vamos a setear cuando ya instalemos Prettier. Tambien debemos crear un archivo .eslintignore para ignorar node_modules y otras carpetas.

yarn add eslint --dev
yarn eslint --init

5 - Lo iniciamos y vamos a darle el siguiente config. Finalizado esto, eliminamos el archivos package-lock.json

6 - Instalamos prettier y las configuraciones con nuestro linter (en este caso, ESLint) y creamos nuestro archivo prettier.config.js donde van a estar nuestras configuraciones.

yarn add prettier eslint-plugin-prettier eslint-config-prettier -D

7 - Creamos un ".editorconfig" y cambiamos el valor a true en trim_trailing_whitespace y insert_final_newline. Tambien ponemos el end_of_line en lf

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

Ya instalado ESLint y Prettier toca configurarlo y arreglar errores que nos va a saltar por culpa de TypeScript

8 - Seteamos nuestros archivos de .eslintrc.json y prettier.config.js de la siguiente manera

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true,
    "jest": true
  },
  "extends": [
    "plugin:react/recommended",
    "standard",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "settings": {
    "react": { "version": "detect" }
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "rules": {
    "prettier/prettier": "error",
    "space-before-function-paren": "off",
    "react/prop-types": "off",
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": "off"
  }
}

prettier.config.js

module.exports = {
  semi: false,
  singleQuote: true,
  arrowParens: 'avoid',
  trailingComma: 'none',
  endOfLine: 'auto'
};

9- Arreglamos las cagadas que nos va a tirar ESLint

index.tsx

import React from 'react'
import Head from 'next/head'

const Home: React.FC = () => {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1> hello world</h1>
      </main>
    </div>
  )
}

export default Home

_App.tsx

import React from 'react'
import { AppProps } from 'next/app'

const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
  return <Component {...pageProps} />
}

export default MyApp

Proximamente se viene la segunda parte de Next-images para poder incrustar svg's como componente y que se muestren en el html como svg e integrar Styled-components con Next-js en Typescript !

Fuente

https://www.youtube.com/watch?v=1nVUfZg2dSA