According to the documentation found here
To import a css file I can do the following in 'pages/_app.js':
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
Easy enough.
From my understanding this over rides the App component with the global css.
The documentation says:
Next.js uses the App component to initialize pages. You can override it and control the page initialization. Which allows you to do amazing things like:
However when I first initialize an app with Next Js I get a root page of pages/index.js
This contains my start up page. There is no app.js file or App component anywhere here.
I'm confused as to how the App component is integrated into the regular index.js file.
My question is:
Is the pages/_app.js automatically some how wrapped around pages/index.js?
Or do I have to import the myApp component into the pages/index.js file?
My question is: Is the pages/_app.js automatically some how wrapped around pages/index.js? Or do I have to import the myApp component into the pages/index.js file?
Yes, next.js automatically wraps your application with the component defined in _app.js. If you don't have that file, next.js uses its default.
You need to follow a specific pattern when defining your App component in _app.js. You can check here to see how you should set a custom App component: https://nextjs.org/docs/advanced-features/custom-app
Related
I am migrating to Vue3 from Vue2 and am trying to wrap my head around how to extend an existing vue component that has template, script and style sections in it. I have read about composables but I haven't seen an example that uses a combination of template/script/style sections. The only examples I see use a js/ts file which only contain the script section and then is usually inserted via useXYZ call.
Is this possible in Vue3? Do I have to use mixins or some plugin to make this happen?
// Foo.vue
<template>Some long template with lots of elements</template>
<script lang="ts">
import Vue from 'vue'
// Tons of functions and variables in here
export default Vue.extend({ [component "Foo" definition] })
</script>
<style>
<!--Tons of CSS here -->
</style>
and the extended component:
import Foo from './Foo'
export default Foo.extend({ [extended component definition] })
I want to add a custom APP File on NEXT JS 13, in the documentation:
Next.js uses the App component to initialize pages. You can override it and control the page initialization and:
Persist layouts between page changes
Keeping state when navigating pages
Inject additional data into pages
Add global CSS
To override the default App, create the file ./pages/_app.js as shown below:
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
I add the file, and the code but it does not work.
I am using the new APP Folder to make the routes. So I asume there is another way to make a custom APP file using the APP folder.
These _document.jsx and _app.jsx files aren't supported in the app directory.
Here is the official migration documentation
import your global css stuff (with any name you want) inside app/layout.tsx
I'm migrating a project made in create react app to nextjs and I ran into this problem
./node_modules/react-bootstrap-submenu/src/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules\react-bootstrap-submenu\dist\DropdownSubmenu.js
Does anybody know how to solve this?
Document
Since Next.js 9.5.4, importing a CSS file from node_modules is permitted anywhere in your application.
For global stylesheets, like bootstrap or nprogress, you should import the file inside pages/_app.js. For example:
// pages/_app.js
import 'bootstrap/dist/css/bootstrap.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
If this solution doesn't work for you, consider the solutions below.
Copy css file to public/static.
and then
// pages/_app.js
import 'public/static/bootstrap.css'
Is it possible to import React components from inside the page's directory ?
I can successfully import from outside /pages/[...]/.
/components/[...]/ works just fine for instance. And that is cool for re-usable components.
But if I want to split a single page's components into separate files as follows :
/components
- SomeReusableComponent.tsx
/pages/[...]/
- index.tsx
- SomePageComponent.tsx
And import it into my main component :
// /pages/[...]/index.tsx
import SomeReusableComp from '../components/SomeReusableComponent'
import SomePageComp from './SomePageComponent'
export default function MyPage(){
// page code
}
My build fails : Build optimization failed: found pages without a React Component as default export in
pages/
Is there a trick to do that ? Some setting or else to tell nextjs that this file is a dependency and not a page ?
No, unfortunately that is not possible. All files within the pages directory for a Next.js project must be entry points (that subsequently get turned into routes) and cannot be imported from any other files in your project. Next "collects" all of these files in pages and processes them in a special way, so there is no way to avoid that currently.
Typically for reusable parts that I want to use in multiple pages, I create a component that accepts children as a prop.
For example:
components/layout.js
export default function Layout({children}) {
return (
<div className="some-styling-for-pages">
{children}
</div>
)
}
pages/index.js
import Layout from '../components/layout'
export default function IndexPage() {
return <Layout>my page content</Layout>
}
I am creating a multi-page application using ReactJS and I want different styles for different pages, especially the logo position.
This is my App.js file
import React from 'react';
import Login from './user/Login';
import Auth from './user/Auth';
import Home from './user/Home';
import ResetPassword from './user/ResetPassword';
import './App.css';
const App=()=>{
//ROUTING
}
export default App;
The last imported file always overwrites the styling properties of the entire app. I need to change the position of the logo in each page accordingly and also other things. How do I add different css properties for each page?
You can use or module css (for this you have to do changes in webpack).
https://programmingwithmosh.com/react/css-modules-react/
Also you can use package styled components https://www.styled-components.com/
In this case, you have unique styles for all components.
Create a folder structure as below. And import their own css files. If you are using sass use unique class names. For the 3rd party components, you may need using "!important" in the css files.
common/
Avatar.js
Avatar.css
feed/
index.js
Feed.js
Feed.css
profile/
index.js
Profile.js
ProfileHeader.js
ProfileHeader.css
and you can read this : https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822