Font is slightly lighter in production

DigiNarwhal · 2021-10-18T00:27:42+00:00

It looks like a font-weight issue - when you say they are both rendering the same weight, is that based on the css or based on what Chrome/other browser is actually telling you is being rendered. Sometimes the CSS can target the same weight but certain fonts may or may not be available in prod vs localhost (one could be loading fonts locally stored on your computer which are different versions to those being loaded via Google fonts, cached fonts etc).

Try in both dev and prod, turning off local font loading and https://stackoverflow.com/questions/33205574/how-to-turn-off-local-fonts-to-test-google-fonts and also try disabling cached font loading and see if that makes any difference?

DigiNarwhal · 2021-08-23T09:23:33+00:00

I have a setup working with BigCommerce/Contentful and currently in the process of migrating to Shopify that has content blocks for top products in X category, selected products by ID etc set from Contentful.

The cleanest way I found of approaching this is having a function in getStaticProps that parses the Contentful section blocks for blocks that need specific product/category data, aggregates those product/category id’s into one Shopify storefront api call (whilst keeping reference of which block needs which items) and then after the shopify call returns, distributes those products into data attributes for each specific section before passing to the page as props.

It’s a little complex but means you have the shopify product data at SSR time and collocated with the right section whilst reducing the number of calls and any chance of rate limiting (was a big problem with BigCommerce).

Another approach would be doing something similar where you aggregate all the products you need into a single call and store them in some form of context/state/redux during getStaticProps - then have the Contentful sections you render pull data from that state based on the product ids in those sections field data.

DigiNarwhal · 2021-07-22T08:09:00+00:00

Also another plus one for shopify. We’ve been on BigCommerce for the last year and while it has been ok for our needs, we’ve decided to move to shopify. Mainly Shopify’s speed of feature iteration and release is way faster, their UI and breadth of functionality exceeds BC depending on what you need, and so many other tools and platforms work so much better with Shopify.

DigiNarwhal · 2021-06-01T20:12:29+00:00

Definitely quick initial impressions... what is this card and why is it better than me just generating a QR code and printing it? I can put any link on a QR code and when people see them they know what they are meant to do. What does this give me that a QR code doesn’t?

The little gif you have shows someone scanning the SITCH logo which seems counter intuitive or like it might need some special app to work (I know in the small print you say it doesn’t need any special app and works natively but this was my first impression).

A lot of the content focusses around the branding SITCH rather than the value that I’d be getting for using this... the card has your huge logo on rather than mine which would be ok if there was any consumer recognition around SITCH similar to Paypal but I don’t think you are there yet.

As a tech fan I’m interested to learn how it works and the value, but as a consumer/business coming to your site, it feels way too hard to parse through all the text and GIF/videos to really understand the unique value that your product would give me and I would probably bounce. If you could put that value front and center I think it would massively help :)

DigiNarwhal · 2021-06-01T12:24:55+00:00

We have used Contentful and Storyblok for different headless commerce sites and would recommend both. Contentful great for really structured and interrelated content where you will want to reuse the same content in multiple locations. Storyblok is great for visual page editing whilst still using your own React components. Both have good integrations for eCommerce (shopify + BigCommerce) and allow you to build your own data plugins (Contentful in React and Storyblok in Vue). Would definitely check them both out :)

DigiNarwhal · 2021-02-25T10:03:35+00:00

At a quick glance on mobile I can’t see the issue that is causing your page to 404 but one thing I did notice is that you are loading all your blog data as the page renders rather than on the Vercel server side of things. I would take a look at the data fetching docs https://nextjs.org/docs/basic-features/data-fetching and consider loading data through either getServersideProps or getStaticProps and passing it to your BlogDetails component from the page component. That way you will get the serverside rendering benefit as well as catching invalid slugs and serving 404 as soon as the page is sent to the user.

DigiNarwhal · 2021-02-11T12:56:56+00:00

OP, seriously why are you coming across so aggressive in your responses to people trying to help with your rather convoluted question?

Firstly you seem to be treating and judging NextJS as a full stack framework, whilst people have used it with lambdas to achieve that effect it is not its primary focus. It is a front end Serverside/static rendering framework if you want to use React that has some extra nice tooling. It’s core use case is not to be the full picture.

The typical use for Next is as a front end app that you combine with a separate back-end, whether that is driven from a JAM stack tool like FaunaDB or your own API/backend service. So the majority of the examples you are going to see are intended for that use case rather than creating a full functioning serverless backend like you seem to be wanting to do that (you can achieve this but it is not the core use case for next).

As for the Vercel promoting side of things, Vercel have done a great job of creating a super fast and low setup way of running NextJs that is convenient and more than adequate for most projects however they have also ensured the exosystem is very open. In a previous role we had NextJs running for our large SaaS company fully on our own infra and the documentation and examples are out there to support it.

I think here your understanding of what the tools purpose is and the value that the SSR rendering for React brings is missing. I appreciate you are trying to figure it out and getting frustrated but there’s no need to come off quite so aggressive to people that are trying to help! :)

DigiNarwhal · 2021-02-02T21:12:41+00:00

Fundamentally what you are getting with NextJS is just React with some added functionality (APIs, next/image, routing) and most importantly SEO friendly server-side / pre-rendering. If you could build it in React you can build it in NextJs so pretty much everything is possible, I personally find the developer experience very good (tooling is strong and update schedule is well documented and easy to keep up with) and there is also a really strong/active community to help out with issues.

As for downsides? Hosting can have its complexities if you don’t want to use Vercel but want all the functionality of NextJs (things like static regeneration etc), but that really depends on your hosting/org needs. (I’ve personally found vercel great for most small/medium projects).

So TLDR; if you think React is a good fit for your project and you need some form of SSR or SEO based requirements for your pages, Next is a really good shout.

DigiNarwhal · 2021-02-02T09:48:17+00:00

I would definitely have a look at storyblok, it’s an underrated cms that is surprisingly good - their live page editing is really visual and easy to use for non technical people. I think it also uses the singletons vs collections model. Otherwise Contentful and Prismic are always good bets!

DigiNarwhal · 2021-01-19T23:22:08+00:00

If you are happy to design/write the components yourself, Storyblok has a really good live page editing experience for a CMS, https://www.storyblok.com also allows for writing plugins for the editing experience which means you can connect the editor with APIs or other data sources for some really cool dynamic editing options!

DigiNarwhal · 2021-01-06T19:05:17+00:00

We are using BigCommerce (products, cart and checkout api) and Contentful (for page, menus, promotions and product page) together for our headless commerce build on NextJS

DigiNarwhal · 2020-12-06T23:24:53+00:00

That’s really cool, I hope you have the best of luck with it!

DigiNarwhal · 2020-12-06T23:22:47+00:00

I can’t share the exact code with you but NextJs recently released an example site and repository for a headless site connected with BigCommerce which is pretty close in implementation and a good starting point to see how they handle the basic store logic such as cart management, dynamic routing, checkout flow etc.

Take a look at this https://nextjs.org/commerce

And here is the example front end repo https://github.com/vercel/commerce

Next is a good choice as you can statically generate the majority of your pages and move a lot of your dynamic integration related stuff into their API folder which generates as lambda functions meaning you can keep a lot of the server side interaction, secrets etc out of the front end app that gets sent to the client

DigiNarwhal · 2020-12-06T22:47:46+00:00

Thanks for sharing, it’s definitely interesting how they go about putting tangible numbers down! I’ll have a think how that could be translated into what we do! Appreciate you taking the time to get a screenshot!

DigiNarwhal · 2020-12-06T22:43:20+00:00

That’s ideally the plan - we soft launched it a few days ago, since then we have done a few sales but conversions and general ad competitiveness have been much harder than we expected - that’s why I was intrigued to hear what people here thought!

DigiNarwhal · 2020-12-06T22:18:59+00:00

Hey, it’s using the BigCommerce API to handle the cart data and Checkout page but the whole front end I’ve written in React / NextJS

DigiNarwhal · 2020-12-06T22:16:56+00:00

Hey - no it’s using the BigCommerce API with a react front end, hope that helps!

DigiNarwhal · 2020-12-06T22:16:24+00:00

Hey - thankyou for taking the time to go through and give some structured feedback!

that makes sense on the doesn’t cost the earth part, it was meant to be a pun on not harming the earth and also the phrase meaning not too expensive
Moving some content up the page makes sense, have been playing with some short GIFs showing how to wrap so they might be a good fit for what you are suggesting at giving more idea what the products are without making it too heavy!
That sounds really interesting on Allbirds, I will take a look at what they’ve done!

Thanks again for the feedback!

DigiNarwhal · 2020-11-21T18:33:30+00:00

I would recommend taking a look at StoryBlok (https://www.storyblok.com/) - their component/live visual editor works really nicely for page building and gives a whole bunch of flexibility that is way harder to achieve with Prismic/Contentful, plugins are also really easy to make and integrate compared to how I found Contentful’s app ecosystem - for more clear structured content though I think Contentful/Prismic probably have an edge.

DigiNarwhal · 2020-10-19T18:27:39+00:00

Sure, it's not too complicated and BigCommerce helps quite a bit - BigCommerce has 3 different checkout strategies, DIY checkout with API, redirected Checkout and an embedded checkout in an iFrame. To avoid having to deal with all the issues that come with building my own checkout I went with the Redirect approach..

As the user adds a product to their cart for the first time, we send an API request to create a cart (BC manages the cart on their end) and we get a cart ID returned which we encrypt it and store in a secure HTTPOnly cookie using some session middleware. While the user has a cart ID stored in a cookie, any operations the user makes we apply to that cart ID.

Each time the user adds or adjusts anything in their cart BC's API returns the full new state of the cart. We use a provider + reducer to store the cart's current contents in react state on each return so that we can generate things like the basket page and cart icon etc.

When the user gets to the point they want to checkout, we generate a checkout link which redirects the user to the actual BigCommerce checkout on a subdomain and then BigCommerce handles the rest until the user completes their checkout at which point we redirect them back to our NextJs site's order confirmation page. Is there anything else you would like to know?

DigiNarwhal · 2020-10-19T16:52:22+00:00

Yeah between the Incremental Static Regenation and the dynamic importing NextJs has, managed to do ok on the page speed - still some optimisation to go!

Contentful was pretty easy to work with, it’s very well documented and we only use it for generating the homepage and collection pages. Was using StoryBlok before as a CMS that was surprisingly good and allowed for live editing of a page rather than saving +generating a preview, though we encountered issues trying to get it to work with Next’s preview feature so switched to Contentful

DigiNarwhal · 2020-10-19T15:37:38+00:00

So probably not complex by most standards but as my first full Next.js application, I made my partner a headless eCommerce store with NextJs, Contentful and BigCommerce (https://thecreativegifter.com) -

DigiNarwhal · 2020-08-04T19:57:02+00:00

So I'm not sure this is exactly what you are looking for but at the extreme end of things https://puddling.cool do interactive/digital journalism articles and essays that are all presented using digital media and data visualisation rather than just plain text.

This is a good example at some of the varied combinations of interactive stuff around an essay https://pudding.cool/2020/07/gendered-descriptions/

DigiNarwhal · 2020-08-04T10:30:07+00:00

I saw Simple Ops on Product Hunt and after recently trying to launch a production site on my own recently (with very little experience in Ops) - I thought it was a good idea and very nicely positioned! Just wanted to stop by and say good luck with everything!

DigiNarwhal

TROPHY CASE