I'm busy working on a website – somewhat new to this – and I don't quite know where I should store static data: in the public folder as a separate json file, or within the .js file as an object.

In the json file, it would look something like this:

  "navLinks": [
    {"title": "Home", "path": "/", "number":"one"},
    {"title": "Projects", "path": "/projects", "number":"two"},
    {"title": "Education", "path": "/education", "number":"three"},
    {"title": "Blog", "path": "/blog", "number":"four"},
    {"title": "Contact", "path": "/contact", "number":"five"}

While in the .js file, it would be stored as an object somewhere outside of the React component:

import React from 'react';
import NavLink from './navlink';
import Burger from './burger';
import Link from 'next/link';
import { useState } from 'react';
import classNames from 'classnames';

const navLinks = {

function Logo({ children }) {
    return <div className="logo">
        <Link href="/">
            <a className="logo-link" href="">{children}</a>

export default function Navbar({ navLinks }){
    const [isShowNavList, setIsShowNavList] = useState(false);

    const toggleIsShowNavList = () => setIsShowNavList(!isShowNavList);

    const navListClassNames = classNames("nav-list");

    return (
        <nav className="navbar">
            <Logo>Alé Pouroullis</Logo>
            <Burger isShowNavList={isShowNavList} toggleIsShowNavList={toggleIsShowNavList}/>
            <ul className={navListClassNames}>
                {navLinks.map((link, index) => {
                    /* order will be used to stagger the animation
                      of link content when in mobile view. It will be 
                        stored as an inline style variable in the <li> tags.*/
                    const order = index+1;

                    return (
                    <NavLink onClick={toggleIsShowNavList} key={link.title} style={{"--order": order}} exact href={link.path} className="nav-link">

  • why not module.exports = [...] in './navlist' and import navList from './navlist' in your main file?
    – Caleth
    Jul 19, 2022 at 15:26
  • This question is subjective given how it has been asked. I don't think there is a right or wrong answer, here. Both solutions are downloaded by the browser in plain text. Pick the one that works the best, or consult your team if they already have a preferred practice. Jul 19, 2022 at 18:46
  • @GregBurghardt Sorry, I should've added a little more info. I'm very new to web design, and I'm trying to pick up on best practices. I was unsure as to what the standard way is, if there even is one, of storing static data in a project. Jul 19, 2022 at 18:55
  • 2
    Typically if you do a little searching and you cannot quickly find a "standard way" it means there is no standard way. This applies to almost every aspect of computer science and software engineering. Jul 19, 2022 at 20:48

2 Answers 2


In a more general sense, this appears to be a question about whether you should store data separate from the programming logic that operates on that data. There is no standard or recommended way, even within the realm of developing React components. Instead you will need to consider the benefits and drawbacks of both solutions.

Once you have thought through this, consider consulting with a teammate. Similar components might have been developed in the past, and the team already has a pre-existing pattern they follow. If that's the case, this is an easy decision. Do what they have done in the past, unless you can communicate a flaw in the design that deserves a different solution.

If no previous components have established a pattern for this, then you have some freedom to make the decision based on your own objective analysis.

Some things to consider when comparing the two solutions:

  • How easy is it to update the menu items?

  • Do you expect this to change?

  • If menu items need to be generated dynamically in the future, how much development and testing effort would be required to hit an API endpoint for the data instead?

  • How does this affect browser caching? If embedding the menu item data in the component, then changing the menu items might require repacking and deploying some number of scripts if they are bundled together. Do you want to do that for a purely data change?

  • If keeping menu items in a separate file, how are cache headers on the web server configured? A static JSON file might not be included in your standard packing system for JavaScript, which tends to put version numbers in URLs as a means to circumvent browser caches.

  • How will QA perceive the impact of changing a menu item in a file containing programming logic? Will they push for regression testing to guard against accidental logic changes? Remember that a good QA tester is naturally distrustful of developers.

  • Why even have this in a JSON object at all? Why not hard code the menu items as HTML right in the React component?

These are all solvable problems, of course, but they are the sorts of things you need to think about before making a decision.

  • Thank you very much Greg. This advice is a couple levels of expertise above me, but it'll be very valuable as I advance. Jul 21, 2022 at 7:46

The consideration for choosing between these options is usually not one of a technical nature, but one of a higher level of application management.

For example, maybe you want to be able to add configuration files on top of a published version of your application, and if this data is part of the configuration, it can make sense to put it in a separate file so that it can easily be overwritten without touching any of the code.

Or maybe the people that are allowed to alter the configuration are not allowed to touch the code; which is another reason for separating these into different files.

However, if this data is a completely private concern only to the developers, and is not considered to be configurable after publishing; then the decision can be made purely by the developers.

In that case, I'd argue that it's a matter of "is it in the way?". A single integer is not in the way, but 50 lines worth of JSON would be; even though both technically count as the same kind of static data. I would judge this on a case by case basis.

  • "is in in the way?" I'm not sure what you meant to say but my typo sense is tingling Jul 20, 2022 at 19:33
  • Thanks @Flater! This was a fantastic answer. Appreciate you addressing it. Jul 21, 2022 at 7:45
  • @candied_orange Fixed
    – Flater
    Jul 21, 2022 at 10:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.