add-rss-feed-to-nextjs

I love RSS-feeds (and still curse Google for cancelling Google Reader) and use them as my main news source for things I find interesting so with this article I would like to help people to add RSS-feeds to their blogs.


        <p>I love RSS-feeds (and still curse Google for cancelling Google Reader) and use them as my main news source for things I find interesting so with this article I would like to help people to add RSS-feeds to their blogs.</p>

<p>If you read my article about how to add a <a href="https://www.bergqvist.it/blog/2019/11/22/adding-sitemap-to-nextjs">sitemap.xml to your next.js site</a> you will recognise much of the code, it's pretty much the same base but with slightly different XML-markup.</p>

<h2>
  <a name="creating-the-page" href="#creating-the-page" class="anchor">
  </a>
  Creating the page
</h2>

<p>First off we need a page that can return the XML. I suggest you name it <em>"rss"</em>, <em>"feed"</em> or something similar.</p>

<p>In <code>getInitialProps</code> we get our blog posts and set the "Content-Type"-header to  <em>"text/xml"</em> so the browser knows that should expect XML instead of HTML.<br>
We then generate the XML and passes it on to the browser using <code>res.write</code>.<br>
</p>

<div class="highlight"><pre class="highlight plaintext"><code>export default class Rss extends React.Component {
  static async getInitialProps({ res }: NextPageContext) {
    if (!res) {
      return;
    }
    const blogPosts = getRssBlogPosts();
    res.setHeader("Content-Type", "text/xml");
    res.write(getRssXml(blogPosts));
    res.end();
  }
}
</code></pre></div>



<h2>
  <a name="generating-the-base-xml-for-the-feed" href="#generating-the-base-xml-for-the-feed" class="anchor">
  </a>
  Generating the base XML for the feed
</h2>

<p>For the base XML document you will need to add some basic information like the title of the log, a short description, link to your website and the language of the content.<br>
Title, link and description are mandatory elements in the <a href="https://validator.w3.org/feed/docs/rss2.html">RSS specification</a> but add as many optional elements as you find useful.<br>
</p>

<div class="highlight"><pre class="highlight plaintext"><code>const getRssXml = (blogPosts: IBlogPost[]) =&gt; {
  const { rssItemsXml, latestPostDate } = blogPostsRssXml(blogPosts);
  return `&lt;?xml version="1.0" ?&gt;
  &lt;rss version="2.0"&gt;
    &lt;channel&gt;
        &lt;title&gt;Blog by Fredrik Bergqvist&lt;/title&gt;
        &lt;link&gt;https://www.bergqvist.it&lt;/link&gt;
        &lt;description&gt;Web developer with over 22 years of experience. Writing about javascript and front end techniques&lt;/description&gt;
        &lt;language&gt;en&lt;/language&gt;
        &lt;lastBuildDate&gt;${latestPostDate}&lt;/lastBuildDate&gt;
        ${rssItemsXml}
    &lt;/channel&gt;
  &lt;/rss&gt;`;
};
</code></pre></div>



<h2>
  <a name="adding-xml-for-the-blog-items" href="#adding-xml-for-the-blog-items" class="anchor">
  </a>
  Adding XML for the blog items
</h2>

<p>With the basic stuff out of the way all we need to go is generate some XML for the blog posts and figure out when the blog was updated.</p>

<p>The <code>item</code> element should at least contain a link to the blog post, the date when it was published and the text. You can either opt to put a short description and force the user to come visit your page or put the whole post in the XML.</p>

<p>If you have HTML-markup in your text you need to enclose it within a  <code>&lt;![CDATA[${
      post.text
    }]]&gt;</code>-tag or HTML encode the text.<br>
</p>

<div class="highlight"><pre class="highlight plaintext"><code>const blogPostsRssXml = (blogPosts: IBlogPost[]) =&gt; {
  let latestPostDate: string = "";
  let rssItemsXml = "";
  blogPosts.forEach(post =&gt; {
    const postDate = Date.parse(post.createdAt);
    if (!latestPostDate || postDate &gt; Date.parse(latestPostDate)) {
      latestPostDate = post.createdAt;
    }
    rssItemsXml += `
      &lt;item&gt;
        &lt;title&gt;${post.title}&lt;/title&gt;
        &lt;link&gt;
          ${post.href}
        &lt;/link&gt;

        &lt;pubDate&gt;${post.createdAt}&lt;/pubDate&gt;
        &lt;description&gt;
        &lt;![CDATA[${post.text}]]&gt;
        &lt;/description&gt;
    &lt;/item&gt;`;
  });
  return {
    rssItemsXml,
    latestPostDate
  };
};
</code></pre></div>



<h2>
  <a name="finishing-up" href="#finishing-up" class="anchor">
  </a>
  Finishing up
</h2>

<p>The last thing you need to do is to add a <code>link</code> to your feed somewhere in the head of your document.<br>
</p>

<div class="highlight"><pre class="highlight plaintext"><code>&lt;link 
  rel="alternate" 
  type="application/rss+xml" 
  title="RSS for blog posts" 
  href="https://www.bergqvist.it/rss" /&gt;
</code></pre></div>



<p>This will make it easier for browsers and plugins to auto discover your feed.</p>

<p><a href="https://gist.github.com/fredrikbergqvist/36704828353ebf5379a5c08c7583fe2d">The code is available as a gist on github</a> and please leave a comment with any feedback.</p>

      

How to add an RSS-feed to your Next.js site

adding-sitemap-to-nextjs

While building my blog I wanted to support site maps. In this article I show how to add a site map to Next.js.


        <p>While building my blog with Next.js I naturally wanted to support sitemaps because it can supposedly help out the search engines. For my small blog it will not make any difference but for larger sites it's more important. <a href="https://support.google.com/webmasters/answer/156184?hl=en#">Google has this to say</a>.</p>

<blockquote>
<p>Using a sitemap doesn't guarantee that all the items in your sitemap will be crawled and indexed, as Google processes rely on complex algorithms to schedule crawling. However, in most cases, your site will benefit from having a sitemap, and you'll never be penalized for having one.</p>
</blockquote>

<h2>
  <a name="page-for-the-sitemap" href="#page-for-the-sitemap" class="anchor">
  </a>
  Page for the sitemap
</h2>

<p>The first thing we need to do is to create a <em>sitemap.xml.ts</em> page in the "page"-folder. This will expose a <em><a href="https://yourdomain.com/sitemap.xml">https://yourdomain.com/sitemap.xml</a></em> url that you can submit to search engines. if you want to you can omit the <em>.xml</em> part and only use <em>/sitemap</em>, Google search console will accept the url anyway.</p>

<p>We want to make sure that we set the <code>Content-Type</code> header to <code>text/xml</code> and to write our xml output to the response stream.<br>
</p>

<div class="highlight"><pre class="highlight plaintext"><code>export default class Sitemap extends React.Component {
  static async getInitialProps({ res }: any) {
    const blogPosts = getBlogPosts();
    res.setHeader("Content-Type", "text/xml");
    res.write(sitemapXml(blogPosts));
    res.end();
  }
}
</code></pre></div>

<h2>
  <a name="generating-the-base-xml" href="#generating-the-base-xml" class="anchor">
  </a>
  Generating the base xml
</h2>

<p>For the site map we want to list all pages on the site, apart from the blog posts we have to add all additional pages that we want the search engines to find. </p>

<p>I have an about page that I add manually together with the index page but if you have many pages I suggest you create an array and add them in a more automated way.</p>

<p>I won't go into the inner workings of all the properties of a sitemap but I want to mention the <code>&lt;priority&gt;</code>-tag that lets you set a value between 0 and 1 indicating how important you think the page is.<br>
<code>&lt;lastmod&gt;</code> is used to indicate when the page was changed.<br>
</p>

<div class="highlight"><pre class="highlight plaintext"><code>const sitemapXml = (blogPosts: IBlogPostListItem[]) =&gt; {
  const { postsXml, latestPost } = blogPostsXml(blogPosts);
  return `
  &lt;?xml version="1.0" encoding="UTF-8"?&gt;
    &lt;urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"&gt;
    &lt;url&gt;
      &lt;loc&gt;https://www.bergqvist.it/&lt;/loc&gt;
      &lt;lastmod&gt;${latestPost}&lt;/lastmod&gt;
      &lt;priority&gt;1.00&lt;/priority&gt;
    &lt;/url&gt;
    &lt;url&gt;
      &lt;loc&gt;https://www.bergqvist.it/about&lt;/loc&gt;
      &lt;priority&gt;0.5&lt;/priority&gt;
    &lt;/url&gt;
    ${blogPostsXml}
  &lt;/urlset&gt;`;
};

</code></pre></div>



<h2>
  <a name="adding-xml-for-the-blog-posts" href="#adding-xml-for-the-blog-posts" class="anchor">
  </a>
  Adding xml for the blog posts
</h2>

<p>As mentioned above I want to add the dynamic blog post pages to the site map as well. In the <code>blogPostsXml</code>-function I generate xml for all posts and keep track of when the latest post was posted.<br>
</p>

<div class="highlight"><pre class="highlight plaintext"><code>const blogPostsXml = (blogPosts: IBlogPostListItem[]) =&gt; {
  let latestPost = 0;
  let postsXml = "";
  blogPosts.map(post =&gt; {
    const postDate = Date.parse(post.createdAt);
    if (!latestPost || postDate &gt; latestPost) {
      latestPost = postDate;
    }
    postsXml += `
    &lt;url&gt;
      &lt;loc&gt;${post.url}&lt;/loc&gt;
      &lt;lastmod&gt;${postDate}&lt;/lastmod&gt;
      &lt;priority&gt;0.80&lt;/priority&gt;
    &lt;/url&gt;`;
  });
  return {
    postsXml,
    latestPost
  };
};
</code></pre></div>

<h2>
  <a name="last-words" href="#last-words" class="anchor">
  </a>
  Last words
</h2>

<p>Make sure to check that you do not add any pages to the sitemap that is blocked in your robots.txt. </p>

<p>If you have a large site with many pages you can split up the sitemap into several smaller ones, for very large sites this is a must!</p>

<p>I hope this could help out someone and please leave a comment. <a href="https://gist.github.com/fredrikbergqvist/d2896af6563b38c3d880c0e135925ad1">A full gist of the code can be found here</a></p>

      

Adding a sitemap.xml to a next.js site

smashingconf-New-York-2019

A few weeks ago I had the privilege of attending SmashingConf in New York, read about my takeaways.


        <p>A few weeks ago I had the privilege of attending <a href="https://smashingconf.com/ny-2019/">SmashingConf in New York</a>, travelling from a chilly Swedish autumn to a quite pleasant New York end of summer. I spent the weekend fighting jet lag by taking long walks and touristing so I could be fit for the first workshop I had signed up for. </p>

<h2>
  <a name="tldr" href="#tldr">
  </a>
  TL;DR
</h2>

<p>Great conference but not technical enough for my taste. </p>

<p>Watch <a href="https://vimeo.com/showcase/6539127/video/367872808">Wes Bos's talk</a> (<a href="https://wesbos.github.io/Slam-Dunk-JavaScript/#1">slides</a>) for good javascript insights and all talks can be found here: <a href="https://vimeo.com/showcase/6539127">SamshingConf NY 2019 videos</a>.</p>

<h2>
  <a name="lightning-fast-performance-with-scott-jehl" href="#lightning-fast-performance-with-scott-jehl">
  </a>
  Lightning fast performance with Scott Jehl.
</h2>

<p>Spending a whole day digging deep into performance sounded like a great way to spend a Monday so I had booked. <br>
The venue for the workshop was located at Microsoft, just a short walk from my hotel so I had plenty of time to get a good nights sleep, eat a steady breakfast and still make the 9 o'clock start without any problems.</p>

<p>Scott Jehl was really easy going and the workshop covered tools to measure performance and how to mitigate issues. <br>
I would however have liked more nitty gritty details and less time spent on using online tools. </p>

<p>The <a href="https://vimeo.com/showcase/6539127/video/367887672">Move Fast &amp; Don't Break Things-talk</a> that Scott held on the second day of the conference was a distilled version of the workshop so check it out if you're interested.</p>

<p>In the evening I attended a Shopify-hosted jam session with lightning talks from Shopify, Microsoft, Forestry (about TinaCMS!) and a few others talkers.</p>

<h2>
  <a name="conference-day-one" href="#conference-day-one">
  </a>
  Conference day one
</h2>

<p>The conference took place at the <a href="https://newworldstages.com/">New world stages</a> close to time square. <br>
The main stage was a musical theatre which worked well but the rest of the venue was quite cramped. </p>

<p>Many of the talks were more of the UX/inspirational kind which can be nice, bnut Im more of a hands on person so my favourites were the following.</p>

<p><a href="https://vimeo.com/showcase/6539127/video/367853694">Marcy Sutton on Garbage Pail Components</a> is a talk about accessibility with an 80's twist (and not even the first 80's flashback this conference).</p>

<p><a href="https://vimeo.com/showcase/6539127/video/367872808">Wes Bos on Slam Dunk Your JavaScript Fundamentals</a> is jam packed with new APIs that you might not have heard of yet, especially the Intl-object.</p>

<p>In the evening the SmashingConf party took place at Waylon bar where speakers and participants got to mingle. I met lots of friendly people from both sides of the pond and had a great time.</p>

<h2>
  <a name="conference-day-two" href="#conference-day-two">
  </a>
  Conference day two
</h2>

<p>With a slight hangover and not enough sleep I went to see the <a href="https://vimeo.com/showcase/6539127/video/367875942">mystery speaker dina Amin</a> who makes wonderful stop-motion shorts with old discarded electrical devices.</p>

<p>Another fun talk was the <a href="https://vimeo.com/showcase/6539127/video/367885607">Using a Modern Web to Recreate 1980s Horribly Slow &amp; Loud Loading Screen</a>-talk where Remy Sharp recreated the loading screens of his old 80's Sinclair Spectrum computer. All ending with a photo of the audience being transformed to the Spectrum image format and shown on the big screen</p>

<h2>
  <a name="nextjs-with-remy-sharp" href="#nextjs-with-remy-sharp">
  </a>
  Next.js with Remy Sharp
</h2>

<p>With the conference over I still had a workshop day to look forward to so I went back to the Microsoft office to learn some next.js!</p>

<p>The workshop was good with all the basics of next.js covered, I had already tinkered with next.js (my homepage runs for example) so most things were familiar but luckily I had not read up on the changes in 9.1 so I did learn some new tricks.</p>

<p>All in all I had a great week in NYC and I met lots of great people but I would have liked if the conference and workshops were a bit more technical.</p>


      

SmashingConf New York 2019

typing_react_with_typescript

Typescript patterns to use with React, Redux, JSS and Material UI

<p>TypeScript has really taken off lately in the React world and rightly so, it&#x27;s a great way to keep your code documented and help you keep some errors at bay.</p><p>I have worked with TypeScript in a few projects the last few years, all involving Angular in some form but never with React so I had some new challenges in front of me when I started my current project with React and TypeScript.</p><h2>Functional components</h2><p>Let us start off easy with a basic functional component:</p><pre><code class="language-javascript">interface OwnProps {
        myProp:string;
      }
      
      const MyButton: React.FC&lt;OwnProps&gt; = (props) =&gt; {
        return (&lt;button /&gt;);
      }
      
      export default MyButton as React.ComponentType&lt;OwnProps&gt;;</code></pre><p>We create an interface called <code>OwnProps</code> where we define all props we want the component to have. </p><p><code>OwnProps</code> is then used to define the component: <code>React.FC&lt;OwnProps&gt;</code> as well as when we export the component <code>as React.ComponentType&lt;OwnProps&gt;</code> to clearly signal what props are available.</p><p>In this basic example it may seem unnecessary but, as we shall see further down, when components get more complex it will save us some headache.
      This approach will also help negate the following error:</p><blockquote><p>error TS2604: JSX element type &#x27;MyComponent&#x27; does not have any construct or call signatures.</p></blockquote><h2>Wrapping another component</h2><p>In some cases you might want to wrap another component and include that components interface in your own. This is usually the case when working with base components from a library and since we use Material UI (MUI for short)as a base component library I will use that in the example.</p><pre><code class="language-javascript">interface OwnProps {
        buttonText:string;
      }
      type Props = OwnProps &amp; ButtonProps;
      
      const MyButton: React.FC&lt;Props&gt; = ({buttonText, ...rest}) =&gt; {
        return (&lt;Button {...rest}&gt;{buttonText}&lt;/Button&gt;);
      };
      
      export default MyButton as React.ComponentType&lt;Props&gt;;</code></pre><p>The <code>Props</code> type can be seen as the sum of all parts that the component will consist of. In this case we want to use <code>ButtonProps</code> from MUIs Button component and merge it with our own and expose both props to the consumers of the component. </p><p>This is still not very advanced but since we use MUI we also use JSS for styling so let us add that to the mix!</p><h2>Using WithStyles and WithTheme</h2><p>Since we use MUI we handle styling with JSS and the generated CSS classes are injected via the <code>withStyles</code> HOC. This caused some issues since a classes object containing the class names is injected into your props and to use classes you would need to include that object in your prop type.</p><p>Luckily we have the WithStyles type to help us! 
      <code>WithStyles&lt;typeof styles&gt;</code> takes a generic type argument of your style object so you don&#x27;t have to worry about it keeping your types DRY.</p><p><a href="https://material-ui.com/guides/typescript/">The typescript section at Material UI</a> explains the problems with withStyles more in detail, ready up on it if you plan to use MUI and TypeScript.</p><pre><code class="language-javascript">const styles: (theme: Theme) =&gt; StyleRules&lt;string&gt; = theme =&gt;
        createStyles({
          root: {
            margin: theme.spacing.unit
          }
        });
      interface OwnProps {
        buttonText:string;
      }
      type PublicProps = OwnProps &amp; ButtonProps;
      type Props = PublicProps &amp; WithStyles&lt;typeof styles&gt;;
      const MyButton: React.FC&lt;Props&gt; = ({classes, buttonText, ...rest}) =&gt; {
        return (
          &lt;Button {...rest} className={classes.root}&gt;
            {buttonText}
          &lt;/Button&gt;);
      };
      export default withStyles(styles)(MyButton) as React.ComponentType&lt;PublicProps&gt;;</code></pre><p>The addition we&#x27;ve done here is adding a <code>PublicProps</code> type and using that instead of the Props type when exporting the component. This is of course because we also want to use WithStyles but not expose it to anyone using the button.</p><p>Had we used the Props type instead of PublicProps we would get a pesky TypeScript error complaining about classes property missing.</p><p><img alt="TS2741: Property &#x27;classes&#x27; is missing in type &#x27;{buttonText: string}&#x27; but required in type &#x27;{ classes: Record&lt;string, string&gt;}&#x27;" src="https://media.graphcms.com/trkCu0vrQDOgc4hbdhKh"/></p><h2>Redux connect and compose</h2><p>But what would React be without state handling? We use Redux for this so let us connect MyButton and get the buttonText prop from state instead.</p><pre><code class="language-javascript">const styles: (theme: Theme) =&gt; StyleRules&lt;string&gt; = theme =&gt;
        createStyles({
          root: {
            margin: theme.spacing.unit
          }
        });
      
      interface StateProps {
        buttonText:string
      }
      interface DispatchProps {
        dispatch: ThunkDispatch&lt;IAppState, undefined, Action&gt;;
      }
      interface OwnProps {}
      type PublicProps = OwnProps &amp; ButtonProps;
      type Props = PublicProps &amp; 
                   DispatchProps &amp; 
                   StateProps &amp; 
                   WithTheme &amp;
                   WithStyles&lt;typeof styles&gt;;
      
      const MyButton: React.FC&lt;Props&gt; = ({classes, buttonText, ...rest}) =&gt; {
        return (
          &lt;Button {...rest} className={classes.root}&gt;
            {buttonText}
          &lt;/Button&gt;);
      };
      
      const mapStateToProps = (state: IAppState): StateProps =&gt; {
        return {
          buttonText: state.buttonText
        };
      };
      
      export default compose(
        withStyles(styles, { withTheme: true }),
        connect&lt;StateProps, DispatchProps, OwnProps, IAppState&gt;(mapStateToProps)
      )(MyButton) as React.ComponentType&lt;PublicProps&gt;;</code></pre><p>We have not started using hooks for our state so we go with the good old connect. Since we now use both <code>connect</code> and <code>withStyles</code> we need to use <code>compose</code> to merge them.</p><p>We create <code>StateProps</code> as return type of <code>mapStateToProps</code> and <code>DispatchProps</code> which types the dispatch function that is returned by default if we don&#x27;t add a <code>mapDispatchToProps</code> function. In out case we use Thunk so if you use some other tool you need to use that instead.</p><p>I have also added an example of using the MUI theme in the component, this is done by adding <code>{ withTheme: true }</code> as a second argument to <code>withStyles</code>. 
      This will inject a theme property into your props so we need to specify that in our <code>Props</code> type using <code>WithTheme</code> from MUI.</p><h2>Bonus: typing the useState hook</h2><p>Not really rocket science but good to know!</p><pre><code class="language-javascript">const [state, setState] = useState&lt;string&gt;(&quot;Hello world!&quot;)`</code></pre><h2>End note</h2><p>TypeScript can be very frustrating when starting out with many errors that are not clear so I hope this article could be of some help or inspiration, it took us a while to settle on a TypeScript pattern that worked for us and helped us mitigate most of the errors that might occur when working with different libraries.</p><p>Feel free to leave any suggestions in the comment field.</p><p><a href="https://gist.github.com/fredrikbergqvist/dcff13628f9ebe3fdc2d28c67f24921c">A gist of the code examples are available at GitHub.</a></p>


Blog posts

How to add an RSS-feed to your Next.js site

Adding a sitemap.xml to a next.js site

SmashingConf New York 2019

Typing React with typescript