In a create-next-app Next.js application, I want to move the pages folder in the root directory to a src folder. I added a jsconfig.json with the code (below), however now I get the error message "404 | This page could not be found." Anyone have any insight? (Sorry beginner to web development)
{
"compilerOptions": {
"baseUrl": "src"
}
}
Nextjs by default supports moving /pages to src/ folder.
Create a /src folder in the root directory.
Delete the /.next folder
Move /pages to the /src folder
Remember package.json, .gitignore and other config files needs to be in the root directory and should not be moved to the /src folder.
Once that is done just run the command $ npm run dev or $ yarn dev , so you can view it on your localhost.
More: https://nextjs.org/docs/advanced-features/src-directory
In case you are using NextJS + TailwindCSS, you need to change the following in tailwind.config.js after moving files under the src directory:
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
...
...
You need to stop the server and then do npm run dev. That solved my problem when I moved things into the src directory and started getting 404 pages.
content: [
'./src/pages/**/*.{js,ts,jsx,tsx}',
'./src/components/**/*.{js,ts,jsx,tsx}',
],
replace above in case of src
As #Thierry mentioned in the comments, according to the docs "Pages can also be added under src/pages as an alternative to the root pages directory. The src directory is very common in many apps and Next.js supports it by default."
So, src/pages will be ignored if pages is present in the root directory.
More at the official docs: https://nextjs.org/docs/advanced-features/src-directory
src/pages will be ignored if pages is present in the root directory
Update tsconfig.json (if you use Typescript)
"paths": {
"#/*": ["./src/*"]
}
Reload npm run dev
Related
I have a FRESHLY installed NextJS app with TypeScript. I am using Next V12, when I run yarn lint, it runs next lint and shows no errors.
And now when I add an extra rule in the .eslintrc file like "no-unused-vars": 2 (it means to show an error when there's an un-used variable), and add an un-used variable on purpose in my index.tsx file inside the pages folder so that I can test the linting, it works as expected.
But when I add another folder called hooks and add an index.tsx file with unused variables in it, it doesn't capture the unused variable error in hooks folder, only captures the ones inside pages folder.
My .eslintrc file looks like this -
{
"extends": "next/core-web-vitals",
"rules": {
"no-unused-vars": 2
}
}
If anyone faced this issue before and knows what I'm doing wrong, please suggest.
According to the docs, next lint runs ESLint for files in the following folders: pages, components, and lib.
To run ESLint for other folders as well, you have to use the --dir flag.
You can either do so directly in the terminal:
yarn run lint -- --dir . //for all folders in your project root directory
yarn run lint -- --dir pages hooks //only for the folders "pages" and "hooks"
Or change the lint script in package.json:
{
...
"scripts": {
...
"lint": "next lint --dir ." //or "next lint --dir pages hooks"
...
}
...
}
Note that the above is for development mode.
For production mode, you can add the dirs option to eslint in next.config.js:
module.exports = {
eslint: {
dirs: ['.'] //or ['pages', 'hooks']
}
}
I am working on several Angular projects which has same node_folder (with same node dependencies), so i made a symlink to new second angular project , it compiles successfully , but CSS is not working.
later i removed the symlink and modified the angular.json with "../node_modules/.." pointing to node_modules folder which is on same level as project folder
../
./
/node_modules
/project1
/project2
etc
still the project gets compiled , yet CSS is not working - is it possible to fix this and get CSS working with this way ?
Adding NODE_PATH pointing to node_modules folder and modifying the angular.json accordingly solved the problem
I am having a css file in my assets/css folder, that needs to access some fonts in the assets/fonts folder. I can make it work localhost by writing url('/assets/fonts/myfont.svg').
On the server this isn't working because the path to the root of my site is mydomain.com/myapp/. I have changed the base from to
Then I have tried:
url('assets/fonts/myfont.svg')
url('~assets/fonts/myfont.svg')
url('./assets/fonts/myfont.svg')
But then the solution won't compile ( Can't resolve 'assets/fonts/myfont.svg')
Thanks very much in advance!
Can you try this url ~src/assets/fonts/myfont.svg
It definitely works for me.
You have to declare all your assets in your angular.json file like for example assets folder which is usually declared by default. That makes your assets folder directly available and after the build process, you would notice assets being transferred in the dist folder. Then to use anything from the assets you would write /assets/img.png. The slash before tells the link to take the directory from the root, whereas assets/img.png can sometimes be interpreted from the current directory.
you have to check angular.json and change the assets root like this
"assets": [
"src/favicon.ico",
"src/assets"
],
and the source root under projects like this:
"sourceRoot": "src",
Using Ubuntu 16.04 and Nginx I am trying to deploy a Vue project to production but keep running against a white wall- literally.
I cloned my project to
/var/www/html/maak-web/maak_web/
Installed all needed dependencies with npm install and ran the following build script:
node build/build.js
This started the building for production which was successful and the project deployed.
In my nginx default config I changed the root to point to the correct folder like so:
root /var/www/html/maak-web/maak_web;
When I now visit my domain/IP I see that the project loads (e.g. favicon and site name loads) as well as I can access my static files from here:
https://mysitedomain.com/static
It seems the Vue project works but the problem is that it doesn't actually display anything and visiting sub views like /oneview and /anotherview throw 404 page not found errors.
Since Vue doesn't seem to throw any errors I suspect its the nginx configuration problem!?
The solution was to build the production into /dist/ folder and publish only the /dist/ folder content. Once I copied the content to /www/html/ it worked fine.
seeing that this was an error with not getting the right files to the output folder, i suggest you update your config/index.js file to include the correct production location there by setting index and assetsRoot for the build object
build: {
// Template for index.html
index: path.resolve(__dirname, '../../srv/www/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../../srv/www'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
...
If I install any grunt plugin, it is added to a folder named "node_modules" in the root of my project dir per default.
My question: is it possible to move this whole folder (and therefore all plugins) to another location (but still within my project folder), let's say to "build/node_modules" ?
Of course, I still want to be able to run grunt from anywhere in my project hierarchy after this change.
Nope, that's a feature of the Node.JS core files. In the case you don't know, Node.JS is the platform which Grunt was built.
All require() calls which don't point to an absolute file or start with ./ will try to find modules inside node_modules folders.
You can use symbolic link ln -s /original_node_modules_path/node_modules ./node_modules