Forem: Adrian Prieto

Next.js ▲ + Typescript + Storybook The Really Simple Guide 2019

Adrian Prieto — Mon, 25 Nov 2019 15:29:23 +0000

1. Create a Basic Project

mkdir my-app
cd my-app
yarn init -y 
yarn add react react-dom next 
mkdir pages

Then, open the package.json file in the root directory and replace scripts with the following:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

We’ll also need a page to render, let’s create pages/index.tsx:

const Home = () => <h1>Hello world!</h1>;

export default Home;

2. Add Typescript and @types

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

Start the dev server:

yarn dev

You should see the following warning in your terminal window:

We detected TypeScript in your project and created a tsconfig.json file for you.

now there should be a tsconfig.json file in the root of your project.

Optional: Let’s change the strict field in the tsconfig.json file that was generated for us, like so:

"strict": true

Now restart the development server, so Next.js can use the updated tsconfig.json, and wait for the browser to reload.

3. Add Storybook

yarn add -D @storybook/react @babel/core babel-loader babel-preset-react-app

Add the storybook script to the package.json file scripts:

{
  ...
  "scripts": {
    ...
    "storybook": "start-storybook -p 6006 -c .storybook"
  }
}

Now create a .storybook folder in my-app directory. Then we need to add a config file and a webpack config file inside the .storybook directory:

mkdir .storybook
cd .storybook
touch config.js webpack.config.js

config.js

// .storybook/config.js

import { configure } from '@storybook/react';
// automatically import all files ending in *.stories.tsx
configure(require.context('../src/stories', true, /\.stories\.tsx?$/), module);

webpack.config.js

// .storybook/webpack.config.js

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [require.resolve('babel-preset-react-app')],
    },
  });

  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

Notice that I am configuring the stories directory to be inside the the src directory in config.js, you can place your stories wherever you want, just make sure you specify the correct path in the config.js file and the tsconfig.json file (if necessary).

We haven’t created those directories yet, so lets go ahead and do that in the root directory:

mkdir src 
cd src 
mkdir stories

4. Create a Story

Let’s create a button component inside src/components so that we can see if storybook is working properly:

cd src
mkdir components
cd components
touch Button.tsx

import * as React from 'react';

type Props = {
  text: string;
};

export default ({ text }: Props) => <button>{text}</button>;

Now that we have a component, lets create a story in the stories directory:

// src/stories/Button.stories.tsx

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import Button from '../components/Button';

storiesOf('Button', module).add('with text', () => {
  return <Button text="Click Me" />;
});

Start storybook:

yarn storybook

A browser window should open up in http://localhost:6006/ and storybook should render the story 😀.

That’s it! 🚀

Originally posted here.

Next.js + Styled Components The Really Simple Guide ▲ + 💅

Adrian Prieto — Wed, 27 Jun 2018 11:57:04 +0000

I recently started using Next.js, and quite honestly I have to say, is an awesome tool, you get a lot out of the box, and while there are some things I don't necessary agree with, overall it makes really simple to create static and server‑rendered applications.

Next comes bundled with styled-jsx, which is a full, scoped and component-friendly CSS support for JSX (rendered on the server or the client), and while this is great, I rather use styled components, it's just my preference.

This guide features how you use a different styling solution than styled-jsx that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client.

Next.js has an example repo that already comes with styled components, but you need to clone it and then try to understand what is happening under the hood, I decided to make this quick and really simple guide that illustrates the process of making styled components work with next.js.

Lets get to it!

1. Create a project directory and install next and react dependencies



mkdir my-next-app && cd my-next-app && yarn add next react react-dom

Next.js only supports React 16.
We had to drop React 15 support due to the way React 16 works and how we use it.

Next.org

2. Add scripts to your `package.json`



{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^...",
    "react": "^...",
    "react-dom": "^..."
  }
}

After that, the file-system is the main API. Every .js file becomes a route that gets automatically processed and rendered.

3. Create a /pages directory and your first page.

From your project root directory:



mkdir pages && touch pages/index.js

Populate ./pages/index.js:



export default () => (
   <div>
       <h1>My First Next.js Page</h1>
   </div>
)

and then just run yarn dev and go to http://localhost:3000.

So far, we get:

Automatic transpilation and bundling (with webpack and babel)
Hot code reloading
Server rendering and indexing of ./pages

4. Add styled-components



yarn add styled-components

Let's now edit ./pages/index.js:



import styled from 'styled-components';

export default () => (
  <div>
    <Title>My First Next.js Page</Title>
  </div>
);

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

If you reload the page, you will get an error, this is because we haven’t set up the correct configuration yet, not to worry, we are doing that next.

5. Add babel plugin and custom `.bablerc` file

First, lets install the styled components babel plugin as a dev dependency:



yarn add -D babel-plugin-styled-components

Then create a .babelrc file in the root of the project.



touch .babelrc

Add a babel/preset
Add a styled-components plugin, set the ssr flag to true, displayName to true and preprocess to false.

The final .babelrc file should look like this:



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

Note: displayName will generate class names that are easier to debug (will contain also the component name instead of just hashes); preprocess – experimental feature turned off explicitly.

6. Create the custom `_document.js` file

If you have used create-react-app before, you are used to knowing where your main document is, well, next.js does not expose this file, but you can override the default Document by adding a _document.js file in your pages folder.



touch pages/_document.js

We will be extending the <Document /> and injecting the server side rendered styles into the <head>.

To override that default behavior, you must create a file at ./pages/_document.js, where you can extend the Document class.
https://github.com/zeit/next.js/#custom-document

This is how a custom _document.js would look like, if we just rendered the page and nothing else:



import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  static getInitialProps ({ renderPage }) {
    // Returns an object like: { html, head, errorHtml, chunks, styles }     
    return renderPage();
  }

  render () {    
    return (
      <html>
        <Head>
          <title>My page</title>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

This is how it looks like once we add SSR styled components.



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

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    // Step 1: Create an instance of ServerStyleSheet
    const sheet = new ServerStyleSheet();

    // Step 2: Retrieve styles from components in the page
    const page = renderPage((App) => (props) =>
      sheet.collectStyles(<App {...props} />),
    );

    // Step 3: Extract the styles as <style> tags
    const styleTags = sheet.getStyleElement();

    // Step 4: Pass styleTags as a prop
    return { ...page, styleTags };
  }

  render() {
    return (
      <html>
        <Head>
          <title>My page</title>
          {/* Step 5: Output the styles in the head  */}
          {this.props.styleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

Once this is done, restart your server and the error should go away, your <h1> tag should be red, and SSR styled components should work.

Thats it, so to recapitulate:

Create a project and install dependencies
Add scripts
Create a pages folder and a first page
Add styled components
Add a babel plugin and a custom .babelrc file
Create a custom _document.js file

As you can see, if you already have an existing next.js project, you only need to implement steps 4 to 6.

There is also a way to use plain .css files with next.js, I will be writing a guide on how to set it up soon.

Resources

This post was originally posted on my website on 06/26/2018.

5 Steps to Solving Programming Problems

Adrian Prieto — Sun, 15 Apr 2018 17:46:42 +0000

Solving problems is a programmer’s bread and butter, and everyone has their own method, I personally found 5 steps that most likely than not will help you, not only to solve problems but to do it faster and more efficiently.

1. Read the problem several times until you can explain it to someone else

This is by far, the most important step, read the problem several times, until you fully understand it, if you don’t understand it, you won’t be able to solve it. the best way to know if you understand the problem is by being able to explain it to someone else.

2. Solve the problem manually

Nothing can be automated that cannot be done manually!

Any code we write has a foundation, and it is the manual process. That being said, solve the problem manually first, that way you know exactly what you want to automate, this will save you a lot of time wasted if you just start writing code like a maniac.

Test your process with more than one input and some corner cases to validate it, pay close attention to every single step you take in your head, write it down, as each one counts.

3. Make your manual solution better

See if you can make your process better, if there is an easier way to do it or if there are some steps you can cut to simplify it (like loops). This step is very important, remember that is much easier to reconstruct your process in your head than it is in your code.

At this point you will be tempted to write some code, don’t do it yet, we have one more step to cover, I promise you it will make your final code easier to write.

4. Write pseudo code

Pseudocode is a detailed description of what a program must do, this will help you write every line of code needed in order to solve your problem.

Experienced programmers sometimes omit this step, but I can assure you no matter how experienced you are, if you write some pseudo code, the process of writing your final code will be much easier since you only have to translate each line of pseudo code into actual code.

Let's think about the steps needed to write a function that returns a number's squared value.

// Initialize a variable with a 'n' value

// Multiply variable by it self

// Return the result of that multiplication

Now we know exactly what our code is supposed to do, we have one more step.

5. Replace pseudo-code with real code

Here it is the fun part, now that you know for sure what your program should do, just write some code and test it. remember you can always make your code better along the way.

Lets use our square example (very simple for demonstration purposes):

function square(n) { 
    // Initialize a variable with a 'n' value
    const initialValue = n
    // Multiply variable by it self
    const squaredValue = initialValue * initialValue
    // Return the result of that multiplication
    return squaredValue
}

Optimize your code:

function square(n) { 
    return n * n
}

There you go!

This might seem like an obvious process, but most people omit half of it and start coding, which leads to wasting precious time.

No matter how complex your problem is, I assure you these 5 steps will help you solve it in less time and with fewer headaches.

Note: If your problem is too complex, divide it into small problems, it’s a technique called “Divide and conquer”.

Originally posted on my site - 05/26/2016