Filestructure in application

JavaScript
1

I have a next.js application as a portfolio project.

there is an index.js inside of a pages directory that functions as an app.js would in a normal react application… the components folder holds all of my components that im using.

I would like each item on the main menu in the header section to be its own route, so i would like the buttons in the header to lead to an ‘/intro’ ‘/about’ ‘/contact’ etc… (currently each is just its own seperate component in the components folder and does not belong to any route)

what I did:

  1. I moved intro component out of the components and into the /pages folder
  2. I added a link to /intro on the intro button in the header

so I now have:

          <Link
            href="/intro"
            onClick={() => {
              props.onOpenArticle("intro");
            }}
          >
            <a>Intro</a>
          </Link>

what happens:
it does not work, fails to load:

what ive tried so far:

ive follow the first tutorial https://nextjs.org/learn/basics/create-nextjs-app

ive seen the link documentation here:
https://nextjs.org/docs/api-reference/next/link

their documentation says:

"If you create pages/about.js that exports a React component like below, it will be accessible at /about "

yet ive created a pages/intro that exports the Intro component yet it crashes. Next.js version "next": "^10.0.5",
What am i doing incorrectly? it is some issue with webpack?

link to repo and code discussed:
https://github.com/KravMaguy/nextjs-starter-dimension/tree/fix-filestructure

links to files discussed:
components/Main.js
pages/intro.js
components/Header.js

2

Hey there,

the project you forked has its last commit made on Sep 22, 2018 with NextJS 7. I even can’t run npm install without some errors that break the installation.

Because your ideas are correct, meaning:

  1. create a file pages/intro.js
  2. create a Link to /intro

, I highly recommend creating a new NextJS app from scratch and add the stuff from your current project.

I know that this seems to be a little bit of work, but I think it will highly increase the simplicity of your future work on this project.

3

Did you try removing the method and just using the link?

<li>
  <Link href="/intro">
    <a>Intro</a>
  </Link>
</li>

It seems to work for me. Obviously, the page is hidden because of the inline styles but other than that the page/route seems to work just fine.

4

Yet it has been updated to the latest version of next.js, I had to do that in order to deploy it… I hear what you are saying but Im not experienced with Next.js, ive not been trained in it… I fear I dont have the confidence nor the support to try that approach. Thank you for your reply.

its the same result, whether the method is there or not, still an empty page.

Yes I realize what your saying:

i.e. that the route does work but how can i fix it? obviously I want it to look and behave the same as it did before…

can you please provide a bit more advice. thank you for your reply.

5

ive done the following:

(sorry about the autoformatting on save in the commit, if thats a problem just let me know, basically ive just added the stylesheet)

but now its just grey:

6

I think im closer now to the answer but I still dont know… I see this in the documentation but im not sure exacactly how It wants me to implement it in my current project:

ive renamed index.js to _app.js and in package.json ive set main to _app.js

now its changing the route without loosing the styles but… still not quite as intended… also I noticed this in the console but Im not sure if it has any significance, just thought i should point it out:

7

what you mean is I have to now change this:

based on route, so I have to change the current logic around a bit… next.js… i mean does it have some hoc similar to withrouter() ??

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.