Using Next.Js to build Orcasound Content Site

Next.js is a React Framework that works as a Static Site Generator, and one of my goals for this summer was to build Orcasound’s new content site using Next.js. Since Orcasound is an open-source community, this framework is akin to the current WordPress site (both are open source software). However, in order for people to contribute to the current content site they need to be assigned a role by the admins since WordPress organizes its content with MySQL database. This requires administrative effort and means it isn’t as easy as we’d like for anyone to contribute content — which is one of the reasons we are migrating.

Currently, the Next.js content site allows anyone to edit its content by forking the open source repository and then submitting a pull request. (Here is the orcahome repo if anyone wishes to contribute!) All they need is a Github account.

Interestingly enough, Next.js fights more battles than I initially thought. The tech stack provides static generation of sites (often for blogs and other static content), and also server-side rendering (SSR). (Even a hybrid approach is definitely possible.) It did take me around a week to get everything started; having learned how to code projects in React made the process a lot simpler (and in my opinion, Next.js is a lot faster than React). However, not everything went smoothly.

Next.js has some issues with image customization, and they even address it on their Github in the discussion section. Basically, you cannot directly customize an image; instead, you need to create a div and wrap an image inside that div in order to style the image properly. This can be tedious, especially when you are just starting, but as new versions of Next.js roll out I’m sure this ‘issue’ will be fixed soon.

Another challenge I had was with embedding audio. To solve this problem you will need to install Webpack as a dependency, and in your next-config.js you’ll have to specify the type of content you want your site to render in your next-config.js file.

I also used a React library for audio (react-audio-player), since Next.js doesn’t have one built-in and their documentation regarding audio is pretty minimal. Besides that, it is a great framework that allows for a fast build. 

After the code was built, it was time to create my first pull request. Being new to the open-source community, this was certainly intimidating. I was afraid I was going to break something, but it was a pretty straight-forward process. Now that I know how to do that, I will try to limit my pull requests to smaller or single features, since mine was basically all of the code I had written so far this summer! One of my mentors, Paul, shared a great article with me about this subject which helped me understand better how to create a PR and write clear documentation. 

I managed to build the website and make it seem as similar as possible to the Figma mockups, and I believe Next.js has really simplified things for me. I’m glad I could use this framework, which is relatively new to me, and I’m glad to be able to build content for Orcasound using this tech stack.

Last but not least, Shout to Scott, Brendan, Paul, and all of the other GSoC and Orcasound members – everyone has been incredibly kind and always willing to give a helping hand during this entire process. As summer comes to an end, I’m glad that this project of mine is turning out well and it’s looking closer and closer to the original wireframes. I’m excited to keep developing and collaborating with Orcasound!

3 thoughts on “Using Next.Js to build Orcasound Content Site

  1. Judy Crawley says:

    Great detailed information on the technical architecture & development process!
    Congrats on making great progress!
    I was in IT for over 40 years, retired now. Experienced so much software & DB evolutions over the years. Never good at the newer coding techniques, yet worked with many good developers. Keep it as simple & reliable as possible, my underlying goal. Majority of users don’t want to have to install any special components.
    I was initially drawn to the internet many years ago from a site off northern Vancouver Island http://www.orca-live.net/community/
    Simple blog & video links to cameras. So incredible to see Orcas in th wild! This site was created from developers in Japan.
    Right now the blog part has server issues… working on it… The video feeds still work.
    …. just giving you ideas of a site that I have enjoyed for probably 20 years. This is based from a very remote site on Hansen Island, northern tip of Vancouver Island.
    I’d be more than happy to provide feedback, if you get to the point of testing.
    Great work & so appreciate all the tech explanations!

  2. Scott Veirs says:

    @Judy The orca-live community site — http://www.orca-live.net/community/index.html — that Paul and Helena built at Orca Lab was the original inspiration for expanding the hydrophone network from 1-5 locations in Washington State (2000-2015) and all the open source code we’ve been building at Orcasound since 2017! Honestly, we’re still learning from their community and backend/UI choices, and look forward to learning even more from and sharing everything with them and other members of the BC hydrophone network — https://www.bcwhales.org/bchydrophonenetwork.

Leave a Reply

Your email address will not be published. Required fields are marked *