<repo_name>JavaJames93/next-express-strapi-base<file_sep>/app/next.config.js
require("dotenv").config();

module.exports = {
  exportPathMap: function () {
    return {
      '/': { page: '/' }
    }
  },
  env: {
    API_URL: process.env.API_URL
  }
}<file_sep>/app/src/pages/section.js
import React from 'react';

import { useRouter } from 'next/router';

import { useQuery } from "@apollo/react-hooks";

import Query from '../components/query';
import GET_SECTION from '../apollo/queries/sections/section';

export default props => {

    const router = useRouter();

    const { data, loading, error } = useQuery(GET_SECTION, {
        variables: { sectionId: parseInt(router.query.section) }
    });

    if (loading) return <div>Loading...</div>;
    if (error) return <p>ERROR: {error.message}</p>;
    if (!data) return <p>Not found</p>;
    if (data) console.log(data);

    return (
        <>
            {data.section &&
                <h3>Testing new Page: {data.section.title}</h3>
            }
        </>
    );
}<file_sep>/README.md
# next-express-strapi-base

This repository contains the base code for an application that uses the following tech stack:
- Node.js App
  * Next.js
  * Express.js
  * GraphQL
  * Apollo
- Strapi (*Headless CMS*)
  * GraphQL
<file_sep>/app/src/pages/_app.js
import React, { useEffect } from 'react';
import Head from 'next/head';
import { ApolloProvider } from '@apollo/react-hooks';
import withData from '../utils/apollo';

import { ThemeProvider, makeStyles } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Container from '@material-ui/core/Container';

import theme from '../theme';
import Navbar from '../components/Navbar';
import Layout from '../components/Layout';


const useStyles = makeStyles(theme => ({
    root: {
        display: 'flex',
    },
    toolbar: theme.mixins.toolbar,
    content: {
        flexGrow: 1,
        backgroundColor: theme.palette.background.default,
        //backgroundColor: '#ccdff5',
        padding: theme.spacing(3),
        paddingTop: theme.spacing(6)
    },
    progress: {
        margin: theme.spacing(2),
    }
}));

const App = ({ Component, pageProps, apollo }) => {

    const classes = useStyles();

    useEffect(() => {
        // Remove the server-side injected CSS.
        const jssStyles = document.querySelector('#jss-server-side');
        if (jssStyles) {
            jssStyles.parentElement.removeChild(jssStyles);
        }
    }, []);

    return (
        <ApolloProvider client={apollo}>
            <Head>
                <title>Clin One</title>
                <meta name="viewport" content="initial-scale=1.0, width=device-width" />
                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="<KEY>" crossOrigin="anonymous" />
                <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
            </Head>
            <ThemeProvider theme={theme}>
                {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
                <CssBaseline />
                <Layout>
                    <Navbar />
                    <Container className="p-4">
                        <div className={classes.toolbar} />
                        <Component {...pageProps} />
                    </Container>
                </Layout>
            </ThemeProvider>
        </ApolloProvider>
    )
}

// Wraps all components in the tree with the data provider
export default withData(App);