I was following a simple tutorial for react that transitions to next. Everything worked while doing react but the conversion over the Next has broken and I am not sure where, though I believe it has to do with needed require statements. I'm still unclear about the initial service of a next app while using node on the back end.
Node Code:
'const http = require('http');
const express = require('express');
const app = express();
const mariadb = require('mariadb');
const fs = require('fs');
const date = require('date-and-time');
...
app.get('/', (req, res) => {
fs.readFile('WEBSITE/pages/index.js', (err, data) => {
if (err) {
res.status(404).send('File not found!');
console.log('404 Sent!');
} else {
console.log('Website Served.');
res.status(200).type('text/html').send(data);
...
});'
Front End Code:
'import { useState } from 'react';
function Header({ title }) {
return <h1>{title ? title : 'Default title'}</h1>;
}
export default function HomePage() {
const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
...
}'
So the rendering is not happening before the index.js is sent. That may also have to do with my app.get function just sending the index.js. How do I fix the rendering issue. Here are my installed packages just to be clear:
' "scripts": {
"dev": "next dev"
},
{
"dependencies": {
"date-and-time": "^2.4.3",
"express": "^4.18.2",
"mariadb": "^3.1.1",
"next": "^12.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}'