DEV Community: Renan Aguiar

Nextjs + typescript +styled-components

Renan Aguiar — Tue, 02 Jun 2020 08:15:44 +0000

Summary

1 - Add Typescript
2 - Install styled-components
3 - Apply globalStyle
4 - Bonus 1 - Absolute imports
5 - Bonus 2 - SSR with stylesheet rehydration

In case you get lost, all the code is available on https://github.com/rffaguiar/setup-nextjs-typescript-styled-components

You can also reach me on twitter @rffaguiar.

Let's move on!

You have just started to learn Next.js on https://nextjs.org/learn/basics/create-nextjs-app. Now you want to start building your amazing apps on your own. The small tutorial didn't teach how to add styled-components, typescript, or global style. Don't worry, let me baby step on these.

Attention: the following package versions were used on this setup:

"dependencies": {
    "next": "9.4.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "styled-components": "^5.1.1"
  },
  "devDependencies": {
    "@types/node": "^14.0.9",
    "@types/react": "^16.9.35",
    "babel-plugin-styled-components": "^1.10.7",
    "typescript": "^3.9.3"
  }

Add Typescript

Rename any of your .js to .tsx . Go ahead and rename your index.js to index.tsx and try to start your server. You will receive an error on CLI that you're trying to use Typescript but you don't have the necessary packages. Run:

npm install --save-dev typescript @types/react @types/node

When you start the server after the ts packages, 2 files are created for you: next-env.d.ts and tsconfig.json.

next-env.d.ts: Nextjs type declaration file referencing its types inside of your node_modules/next/types/global
tsconfig.json: contains the compiler options required to compile the project and specifies the root.

Your typescript is ready.

Install styled-components

npm install --save styled-components

For testing purposes, make your index.tsx like this:

import styled from "styled-components";

const Title = styled.h1`
  color: red;
`;

const Home = () => {
  return (
    <div>
      <p>hello</p>
      <Title>Title</Title>
    </div>
  );
};

export default Home;

Go to the browser and inspect the Title (h1) element.

See how terrible that className is? .sc-AxjAm.gxygnu certainly isn't descriptive!

That's why it's recommended to install the babel plugin together.

npm install --save-dev babel-plugin-styled-components

Create a file .babelrc at the root of your project with the following:

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

Restart the server and inspect the element again.

Pretty cool, right? Now the className is a lot more descriptive.
The babel plugin gives more power-ups to styled-components + Nextjs:

Smaller bundles
Server-side rendering compatibility
Better debugging
Minification
Dead code elimination

Apply globalStyle

Cool! Now you have an incredible JS framework with a powerful style system. But...wait, what if you wanted to reset and/or share styles across all of your pages? Here we go with styled-components' globalStyle.

First, let's start with a Layout component. This is going to wrap every page and has all the shared styles.

Outside the /pages directory, create another folder /layout with Basic.tsx inside:

# /layout
# --/Basic.tsx
# /pages
# --/index.tsx

Inside of Basic.tsx you include and return your shared styles. The trick here is to include the createGlobalStyle and return it on Basic.tsx render.

import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
    // this is the shared style
  html {
    box-sizing: border-box;
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

h1 {
    color: yellow !important; // the important is just to show that the style works!
}

  // anything else you would like to include
`;

const BasicLayout = ({ children }: { children: any }) => {
  return (
    <>
      <GlobalStyle />
      {children}
    </>
  );
};

export default BasicLayout;

Returning to pages/index.tsx. Import the newly created BasicLayout component and wrap the Home returned React element with BasicLayout.

import styled from "styled-components";
import BasicLayout from "../layout/Basic";

const Title = styled.h1`
  color: red;
`;

const Home = () => {
  return (
    <BasicLayout>
      <p>hello</p>
      <Title>Title</Title>
    </BasicLayout>
  );
};

export default Home;

From now on, all the pages that include BasicLayout components are going to inherit the styles.

Congratulations!!! Now you have a proper Nextjs + Typescript + styled-component with global styles working!

Bonus 1 - Absolute imports

By default Nextjs allows you to use relative imports. You know, those never-ending imports ../../../../finally.tsx. If you want to use an absolute import, you have to change just one line on tsconfig.json: the baseUrl.

"compilerOptions": {
    // other options
    "baseUrl": "."
  },

Now, all absolute imports start at the same level as the tsconfig.json file. Using the previous pages/index.tsx import as an example, you can change A to B.

// A
import BasicLayout from "../layout/Basic";

// B
import BasicLayout from "layout/Basic";

Bonus 2 - SSR with stylesheet rehydration

The fancy term which means: serve the required styles for the first render within the HTML and then load the rest in the client.

You need to create a custom /pages/_document.tsx and copy the following logic into it. That's it.

import Document 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()
    }
  }
}

The code above was taken directly from the styled-components example on nextjs github repo.

Migrations on Sequelize-CLI for beginners

Renan Aguiar — Fri, 10 Apr 2020 03:48:03 +0000

I don't know about you, but I always get confused when I search for something on sequelize docs.

Another day I found myself looking for a way to add a single column in a running localhost postgres DB.

For some reason, I thought that I would use the same sequelize on CLI. You have to use another package: sequelize-cli. Ta-da!

You don't even need to install sequelize-cli as a project dependency, since it doesn't depend on your project code, it only cares about the database (and connects directly with it).

Start by installing the package:

npm install --save-dev sequelize-cli

Suppose you want to connect to a DB named crappydb on localhost. Go somewhere on your project or any folder and initialize sequelize and its...well, initial config files.

npx sequelize-cli init

Yes. npx and not npm (the package manager). Simplifying a lot (don't throw rocks on me), npx downloads (if you don't have) and execute the package you give as an argument, instead of installing with npm, creating a script on package.json and running on CLI. For easier understand, the same command with npx and npm:

# executing a command with NPX
1. (CLI) ------------------| npx sequelize-cli init 

# executing a command with NPM
1. (CLI) ------------------| npm install --save-dev sequelize-cli
2. (add on package.json)"--| sequelize-cli": "sequelize-cli"
3. (CLI) ------------------| npm run sequelize-cli -- init

I think 1 command wins over 3!

Returning to sequelize-cli kingdom.
The command generates 4 folders: config, migrations, models and seeders. The big 4.

config is about how to connect to your db.
migrations is about what to change on your db.
models is about the structure on your db and how to connect with it.
seeders is about...seed data.

By default, the config folder will have a file config.json. Change it according to your db credentials.

"development": {
    "username": "root",
    "password": null,
    "database": "crappydb", # name of your db
    "host": "127.0.0.1", # localhost
    "dialect": "postgres", # mysql, mariadb, sqlite etc
    "operatorsAliases": false
  },

Test the connection with npx sequelize-cli db:migrate:status. On the first command, sequelize will create a table named SequelizeMeta to keep track of which migrations were executed or not. This is how it knows to run or not a migration.

Let's start with the migration (finally !!). Start by creating an empty migration:

npx sequelize-cli migration:generate --name <you decide the name>

Suppose you have a table cats. You're crazy about cats and want to add a field to write about every single cat on your database (I don't judge you). You would:

npx sequelize-cli migration:generate --name add-column-description-on-cats

This generates an empty migration like this:

'use strict';

module.exports = {
  up: (queryInterface, Sequelize) => {
    /*
      Add altering commands here.
      Return a promise to correctly handle asynchronicity.

      Example:
      return queryInterface.createTable('users', { id: Sequelize.INTEGER });
    */
  },

  down: (queryInterface, Sequelize) => {
    /*
      Add reverting commands here.
      Return a promise to correctly handle asynchronicity.

      Example:
      return queryInterface.dropTable('users');
    */
  }
};

Transform it to this:

"use strict";

module.exports = {
  up: (queryInterface, Sequelize) => {
    return queryInterface.addColumn("cats", "description", {
      type: Sequelize.DataTypes.TEXT
    });
  },

  down: (queryInterface, Sequelize) => {
    queryInterface.removeColumn("cats", "description");
  },
};

UP is what/how to DO the changes on your db.
DOWN is what/how to UNDO the changes on your db.

Before applying this migration, could you do something for me? Run npx sequelize-cli db:migrate:status.

(CLI) ---------| npx sequelize-cli db:migrate:status
# This will probably output this for you
(CLI output) --| down xxxxxxxxxxxxxx-add-column-description-on-cats.js

xxxxxxxx is the timestamp of your migration. Ok, now run the migration and after that run the same command above to check the status:

(CLI) ---------| npx sequelize-cli db:migrate
# your DB is changed
(CLI) ---------| npx sequelize-cli db:migrate:status
# This will probably output this for you
(CLI output) --| up xxxxxxxxxxxxxx-add-column-description-on-cats.js

Did you realize that before applying the migration the status was down and after migration, it becomes up? That's how sequelize-cli and you know if a migration has been applied or not.

sequelize-cli db:migrate command looks on the SequelizeMeta table for any migration files which haven't run yet. Every migration lives on this table and inside migrations/ folder.

This is the simplest migration you can create. You can do a bunch of other stuff, like:

Turn config.json to config.js to work programmatically inside, use ENV variables, etc.
Use sequelize-cli on different envs: dev, test, and production.
Create tables, use transactions.
Connect with databases using SSL.
Create a file .sequelizercand modify the default CLI folder and options.

However, this is a beginner guide. Maybe for another post :)

bye bye

The end.

Picture Credits: Photo by Markus Spiske on Unsplash