Skip to content
Submitted over 2 years ago

REST Countries Using NextJS + Styled-componets + Axios - 3rd Version

Prabhash Ranjan•2,540
@besttlookk
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...REST Countries API with color theme switcher
  • HTML
  • CSS
  • JS
  • API
4advanced

Design comparison

SolutionDesign

Solution retrospective

Hi everyone, This is my 3rd version of this challenge. Earlier one i made using (React + Tailwind) & (Vanilla Js + Sass). For this one i went for NextJS + Styled-components as i wannted to learn both. As it is first few project Next and Styled-component, i am facing some issues which i am pointing out:

  1. Just when we load the app for flicker of a second style does not apply. Why is that?[SOLVED]
  2. I want you make my dark mode perisistent, for that i tried to use Local-storage but then it started giving error "Prop className did not match.".

I also want to know whats the best file-structure for styled-component files.

If you get any other bug, do let me know. Feedback is always welcome.

Thanks #happyCoding

Community feedback

  • Nurcholis•420
    @cholis04Posted over 2 years ago

    This is it, you've done it. Good work.

    As you requested, I will try to help you to review your solution.

    Let's start with the problem you described above:

    • Flash of unstyled content.

    I guess it's because the behavior of styled components towards SSR is different. We need to inject the server-side rendered styles into the <head>.

    To do that, you can create a .babelrc file in the root folder, then copy the following code.

    Then in the file _document.js, You can also copy the following code.

    For more details, you can read from the documentation directly here.

    • Theming with Styled-Components

    To be honest, I'm also new to learning about implementing themes in styled-components. But I found a good article about this. Maybe you can follow the implementation.

    If I may add, there seems to be some problem with the report.

    1. To improve accessibility, make sure you put your content inside the <main> tag.

    2. Heading levels should only increase by one. Example :

    <h1>Setting the Exposure Manually on a Camera</h1>
      <p>Put text here...</p>
   <h2>Set the ISO</h2>
      <p>Put text here...</p>
   <h2>Choose an aperture</h2>
      <p>Put text here...</p>
   <h2>Choose a shutter speed</h2>
      <p>Put text here...</p>

    https://dequeuniversity.com/rules/axe/4.3/heading-order?application=axeAPI

    Hope this helps. #happyCoding

    2
    Prabhash Ranjan•2,540
    @besttlookkPosted over 2 years ago

    @cholis04 Thank You so much. I added everything u said and it worked. I will read the articles you shared on spare time.

    I hope in future you help me as you did now.

    Thanks

    #happyCoding

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord