最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How set a custom directory for pages in Next JS? (not src or root) - Stack Overflow

programmeradmin1浏览0评论

I'm encountering a problem when set a custom directory in Next JS.

I know that by default, the pages directory should be in root or the src directory, but this option doesn't suit me because I can't hide all the frontend files in one directory.

Instead i want to do it this way:

src
├── frontend
│   ├── pages
│   │   ├── index.tsx                         
│   │   ├── firstPage.tsx                     
│   │   ├── ...
│   │   ponents
│   │   ├── ...                   
├── backend
│   ├── ...   

However Next JS doesn't allow me to do this and I don't understand why, I've tried looking for possibilities for this, e.g:

 "scripts": {
    "dev": "next ./src/frontend",
  },

This works, but it's still not what I need. With this approach, next creates tsconfig, .next, etc directly in the frontend directory, which looks weird, I would like to keep the configuration files in the root directory.

It seems that for some reason I can't have pages directory inside frontend directory, but I can't figure out what this has to do with. If this is really the case could you tell me why?

I'm encountering a problem when set a custom directory in Next JS.

I know that by default, the pages directory should be in root or the src directory, but this option doesn't suit me because I can't hide all the frontend files in one directory.

Instead i want to do it this way:

src
├── frontend
│   ├── pages
│   │   ├── index.tsx                         
│   │   ├── firstPage.tsx                     
│   │   ├── ...
│   │   ponents
│   │   ├── ...                   
├── backend
│   ├── ...   

However Next JS doesn't allow me to do this and I don't understand why, I've tried looking for possibilities for this, e.g:

 "scripts": {
    "dev": "next ./src/frontend",
  },

This works, but it's still not what I need. With this approach, next creates tsconfig, .next, etc directly in the frontend directory, which looks weird, I would like to keep the configuration files in the root directory.

It seems that for some reason I can't have pages directory inside frontend directory, but I can't figure out what this has to do with. If this is really the case could you tell me why?

Share Improve this question edited Aug 11, 2021 at 13:58 juliomalves 50.5k23 gold badges177 silver badges168 bronze badges asked Aug 11, 2021 at 8:47 aiwaiw 851 gold badge2 silver badges7 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 7

Unfortunately, it seems Next.js officially supports only ./pages or ./src/pages directories. Tim explains his point of view over this decision in his ment in one of many issues requesting this option on Github see. More can be found also here and here.

However, you might want to check out this discussion, as Daniel's fork has option to look for pages in additiona directories.

We cannot set custom pages in next.js , but after some research i found the way to change which folder should act as pages/ ,

Like for example if i have multiple apps like , cars/ , bikes/ , we cannot make next.js to choose the cars/ or bikes/ , but i am making which folder should act as pages/

So here is the steps

setup below gulp devDependencies in your project

"gulp": "^4.0.2",
"gulp-clean": "^0.4.0",
"gulp-fs": "^0.0.2",
"gulp-rename": "^2.0.0",

Create gulpfile.js with following content

const gulp = require('gulp')
const fs = require('fs')
var clean = require('gulp-clean')
gulp.task('clean-pages', function () {
  return gulp.src('pages/', { read: false }).pipe(clean())
})
gulp.task('eject-pages', function () {
  return gulp.src('./pages/**/*.{js,tsx,ts,scss}').pipe(gulp.dest('./simba'))
})
gulp.task('serve-cars', function () {
  return gulp.src('./cars/**/*.{js,tsx,ts,scss}').pipe(gulp.dest('./pages'))
})
gulp.task('serve-bikes', function () {
  return gulp.src('./bikes/**/*.{js,tsx,ts,scss}').pipe(gulp.dest('./pages'))
})
gulp.task('bikes', gulp.series('eject-pages', 'clean-pages', 'serve-bikes'))
gulp.task('cars', gulp.series('clean-pages', 'serve-cars'))

it will replace which the pages folder with cars or bikes

in package.json add scripts

"build-cars": "gulp cars && next build",
"build-bikes": "gulp bikes && next build",
发布评论

评论列表(0)

  1. 暂无评论